element-ps 2.0.15 → 2.0.16

package/lib/components/scrollbar/src/scrollbar.js

@@ -2,122 +2,52 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
 require('../../../utils/index.js');
-require('../../../tokens/index.js');
-require('../../../hooks/index.js');
-var bar = require('./bar2.js');
-var scrollbar = require('./scrollbar2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-namespace/index.js');
-var style = require('../../../utils/dom/style.js');
-var scrollbar$1 = require('../../../tokens/scrollbar.js');
+var props = require('../../../utils/vue/props.js');
 
-const _sfc_main = vue.defineComponent({
-  name: "PsScrollbar",
-  components: {
-    Bar: bar["default"]
+const scrollbarProps = props.buildProps({
+  height: {
+    type: [String, Number],
+    default: ""
   },
-  props: scrollbar.scrollbarProps,
-  setup(props) {
-    const ns = index.useNamespace("scrollbar");
-    const scrollbar$ = vue.ref();
-    const wrap$ = vue.ref();
-    const resize$ = vue.ref();
-    const sizeWidth = vue.ref("0");
-    const sizeHeight = vue.ref("0");
-    const barRef = vue.ref();
-    const moveX = vue.ref(0);
-    const moveY = vue.ref(0);
-    const ratioY = vue.ref(1);
-    const ratioX = vue.ref(1);
-    const GAP = 4;
-    const style$1 = vue.computed(() => {
-      const style2 = {};
-      if (props.height)
-        style2.height = style.addUnit(props.height);
-      if (props.maxHeight)
-        style2.maxHeight = style.addUnit(props.maxHeight);
-      return [props.wrapStyle, style2];
-    });
-    const update = () => {
-      if (!wrap$.value)
-        return;
-      const offsetHeight = wrap$.value.offsetHeight - GAP;
-      const offsetWidth = wrap$.value.offsetWidth - GAP;
-      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight;
-      const originalWidth = offsetWidth ** 2 / wrap$.value.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` : "";
-    };
-    vue.provide(scrollbar$1.scrollbarContextKey, vue.reactive({
-      scrollbarElement: scrollbar$,
-      wrapElement: wrap$
-    }));
-    vue.onMounted(() => {
-      if (!props.native)
-        vue.nextTick(() => update());
-    });
-    vue.onUpdated(() => update());
-    return {
-      ns,
-      scrollbar$,
-      wrap$,
-      resize$,
-      barRef,
-      moveX,
-      moveY,
-      ratioX,
-      ratioY,
-      sizeWidth,
-      sizeHeight,
-      style: style$1,
-      update
-    };
+  maxHeight: {
+    type: [String, Number],
+    default: ""
+  },
+  native: {
+    type: Boolean,
+    default: false
+  },
+  wrapStyle: {
+    type: props.definePropType([String, Object, Array]),
+    default: ""
+  },
+  wrapClass: {
+    type: [String, Array],
+    default: ""
+  },
+  viewClass: {
+    type: [String, Array],
+    default: ""
+  },
+  viewStyle: {
+    type: [String, Array, Object],
+    default: ""
+  },
+  noresize: Boolean,
+  tag: {
+    type: String,
+    default: "div"
+  },
+  always: {
+    type: Boolean,
+    default: false
+  },
+  minSize: {
+    type: Number,
+    default: 20
   }
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_bar = vue.resolveComponent("bar");
-  return vue.openBlock(), vue.createElementBlock("div", {
-    ref: "scrollbar$",
-    class: vue.normalizeClass(_ctx.ns.b())
-  }, [
-    vue.createElementVNode("div", {
-      ref: "wrap$",
-      class: vue.normalizeClass([
-        _ctx.wrapClass,
-        _ctx.ns.e("wrap"),
-        { [_ctx.ns.em("wrap", "hidden-default")]: !_ctx.native }
-      ]),
-      style: vue.normalizeStyle(_ctx.style)
-    }, [
-      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
-        ref: "resize$",
-        class: vue.normalizeClass([_ctx.ns.e("view"), _ctx.viewClass]),
-        style: vue.normalizeStyle(_ctx.viewStyle)
-      }, {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["class", "style"]))
-    ], 6),
-    !_ctx.native ? (vue.openBlock(), vue.createBlock(_component_bar, {
-      key: 0,
-      ref: "barRef",
-      height: _ctx.sizeHeight,
-      width: _ctx.sizeWidth,
-      always: _ctx.always,
-      "ratio-x": _ctx.ratioX,
-      "ratio-y": _ctx.ratioY
-    }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("v-if", true)
-  ], 2);
-}
-var Scrollbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/scrollbar/src/scrollbar.vue"]]);
 
-exports["default"] = Scrollbar;
+exports.scrollbarProps = scrollbarProps;
 //# sourceMappingURL=scrollbar.js.map

package/lib/components/scrollbar/src/scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" :class=\"ns.b()\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        ns.e('wrap'),\n        { [ns.em('wrap', 'hidden-default')]: !native },\n      ]\"\n      :style=\"style\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"[ns.e('view'), viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar\n        ref=\"barRef\"\n        :height=\"sizeHeight\"\n        :width=\"sizeWidth\"\n        :always=\"always\"\n        :ratio-x=\"ratioX\"\n        :ratio-y=\"ratioY\"\n      />\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n} from 'vue'\nimport { addUnit } from '@element-ps/utils'\nimport { scrollbarContextKey } from '@element-ps/tokens'\nimport { useNamespace } from '@element-ps/hooks'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps } from './scrollbar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nexport default defineComponent({\n  name: 'PsScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n\n  setup(props) {\n    const ns = useNamespace('scrollbar')\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const barRef = ref()\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = computed<StyleValue>(() => {\n      const style: CSSProperties = {}\n      if (props.height) style.height = addUnit(props.height)\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n      return [props.wrapStyle, style]\n    })\n\n    const update = () => {\n      if (!wrap$.value) return\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n      const height = Math.max(originalHeight, props.minSize)\n      const width = Math.max(originalWidth, props.minSize)\n\n      ratioY.value =\n        originalHeight /\n        (offsetHeight - originalHeight) /\n        (height / (offsetHeight - height))\n      ratioX.value =\n        originalWidth /\n        (offsetWidth - originalWidth) /\n        (width / (offsetWidth - width))\n\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n    }\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n    onUpdated(() => update())\n\n    return {\n      ns,\n      scrollbar$,\n      wrap$,\n      resize$,\n      barRef,\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","Bar","scrollbarProps","useNamespace","ref","style","computed","addUnit","provide","scrollbarContextKey","reactive","onMounted","nextTick","onUpdated","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"scrollbar.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-ps/utils'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\n\nexport const scrollbarProps = buildProps({\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  native: {\n    type: Boolean,\n    default: false,\n  },\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  wrapClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewStyle: {\n    type: [String, Array, Object],\n    default: '',\n  },\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  always: {\n    type: Boolean,\n    default: false,\n  },\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n} as const)\n\nexport type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,cAAc,GAAGA,gBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}

package/lib/components/scrollbar/src/scrollbar2.js

@@ -2,52 +2,122 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
 require('../../../utils/index.js');
-var props = require('../../../utils/vue/props.js');
+require('../../../tokens/index.js');
+require('../../../hooks/index.js');
+var bar = require('./bar2.js');
+var scrollbar = require('./scrollbar.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var style = require('../../../utils/dom/style.js');
+var scrollbar$1 = require('../../../tokens/scrollbar.js');
 
-const scrollbarProps = props.buildProps({
-  height: {
-    type: [String, Number],
-    default: ""
+const _sfc_main = vue.defineComponent({
+  name: "PsScrollbar",
+  components: {
+    Bar: bar["default"]
   },
-  maxHeight: {
-    type: [String, Number],
-    default: ""
-  },
-  native: {
-    type: Boolean,
-    default: false
-  },
-  wrapStyle: {
-    type: props.definePropType([String, Object, Array]),
-    default: ""
-  },
-  wrapClass: {
-    type: [String, Array],
-    default: ""
-  },
-  viewClass: {
-    type: [String, Array],
-    default: ""
-  },
-  viewStyle: {
-    type: [String, Array, Object],
-    default: ""
-  },
-  noresize: Boolean,
-  tag: {
-    type: String,
-    default: "div"
-  },
-  always: {
-    type: Boolean,
-    default: false
-  },
-  minSize: {
-    type: Number,
-    default: 20
+  props: scrollbar.scrollbarProps,
+  setup(props) {
+    const ns = index.useNamespace("scrollbar");
+    const scrollbar$ = vue.ref();
+    const wrap$ = vue.ref();
+    const resize$ = vue.ref();
+    const sizeWidth = vue.ref("0");
+    const sizeHeight = vue.ref("0");
+    const barRef = vue.ref();
+    const moveX = vue.ref(0);
+    const moveY = vue.ref(0);
+    const ratioY = vue.ref(1);
+    const ratioX = vue.ref(1);
+    const GAP = 4;
+    const style$1 = vue.computed(() => {
+      const style2 = {};
+      if (props.height)
+        style2.height = style.addUnit(props.height);
+      if (props.maxHeight)
+        style2.maxHeight = style.addUnit(props.maxHeight);
+      return [props.wrapStyle, style2];
+    });
+    const update = () => {
+      if (!wrap$.value)
+        return;
+      const offsetHeight = wrap$.value.offsetHeight - GAP;
+      const offsetWidth = wrap$.value.offsetWidth - GAP;
+      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrap$.value.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` : "";
+    };
+    vue.provide(scrollbar$1.scrollbarContextKey, vue.reactive({
+      scrollbarElement: scrollbar$,
+      wrapElement: wrap$
+    }));
+    vue.onMounted(() => {
+      if (!props.native)
+        vue.nextTick(() => update());
+    });
+    vue.onUpdated(() => update());
+    return {
+      ns,
+      scrollbar$,
+      wrap$,
+      resize$,
+      barRef,
+      moveX,
+      moveY,
+      ratioX,
+      ratioY,
+      sizeWidth,
+      sizeHeight,
+      style: style$1,
+      update
+    };
   }
 });
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_bar = vue.resolveComponent("bar");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "scrollbar$",
+    class: vue.normalizeClass(_ctx.ns.b())
+  }, [
+    vue.createElementVNode("div", {
+      ref: "wrap$",
+      class: vue.normalizeClass([
+        _ctx.wrapClass,
+        _ctx.ns.e("wrap"),
+        { [_ctx.ns.em("wrap", "hidden-default")]: !_ctx.native }
+      ]),
+      style: vue.normalizeStyle(_ctx.style)
+    }, [
+      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
+        ref: "resize$",
+        class: vue.normalizeClass([_ctx.ns.e("view"), _ctx.viewClass]),
+        style: vue.normalizeStyle(_ctx.viewStyle)
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style"]))
+    ], 6),
+    !_ctx.native ? (vue.openBlock(), vue.createBlock(_component_bar, {
+      key: 0,
+      ref: "barRef",
+      height: _ctx.sizeHeight,
+      width: _ctx.sizeWidth,
+      always: _ctx.always,
+      "ratio-x": _ctx.ratioX,
+      "ratio-y": _ctx.ratioY
+    }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("v-if", true)
+  ], 2);
+}
+var Scrollbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/scrollbar/src/scrollbar.vue"]]);
 
-exports.scrollbarProps = scrollbarProps;
+exports["default"] = Scrollbar;
 //# sourceMappingURL=scrollbar2.js.map

package/lib/components/scrollbar/src/scrollbar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar2.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-ps/utils'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\n\nexport const scrollbarProps = buildProps({\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  native: {\n    type: Boolean,\n    default: false,\n  },\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  wrapClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewStyle: {\n    type: [String, Array, Object],\n    default: '',\n  },\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  always: {\n    type: Boolean,\n    default: false,\n  },\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n} as const)\n\nexport type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,cAAc,GAAGA,gBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"scrollbar2.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" :class=\"ns.b()\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        ns.e('wrap'),\n        { [ns.em('wrap', 'hidden-default')]: !native },\n      ]\"\n      :style=\"style\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"[ns.e('view'), viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar\n        ref=\"barRef\"\n        :height=\"sizeHeight\"\n        :width=\"sizeWidth\"\n        :always=\"always\"\n        :ratio-x=\"ratioX\"\n        :ratio-y=\"ratioY\"\n      />\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n} from 'vue'\nimport { addUnit } from '@element-ps/utils'\nimport { scrollbarContextKey } from '@element-ps/tokens'\nimport { useNamespace } from '@element-ps/hooks'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps } from './scrollbar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nexport default defineComponent({\n  name: 'PsScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n\n  setup(props) {\n    const ns = useNamespace('scrollbar')\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const barRef = ref()\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = computed<StyleValue>(() => {\n      const style: CSSProperties = {}\n      if (props.height) style.height = addUnit(props.height)\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n      return [props.wrapStyle, style]\n    })\n\n    const update = () => {\n      if (!wrap$.value) return\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n      const height = Math.max(originalHeight, props.minSize)\n      const width = Math.max(originalWidth, props.minSize)\n\n      ratioY.value =\n        originalHeight /\n        (offsetHeight - originalHeight) /\n        (height / (offsetHeight - height))\n      ratioX.value =\n        originalWidth /\n        (offsetWidth - originalWidth) /\n        (width / (offsetWidth - width))\n\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n    }\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n    onUpdated(() => update())\n\n    return {\n      ns,\n      scrollbar$,\n      wrap$,\n      resize$,\n      barRef,\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","Bar","scrollbarProps","useNamespace","ref","style","computed","addUnit","provide","scrollbarContextKey","reactive","onMounted","nextTick","onUpdated","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot","_createCommentVNode"],"mappings":"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"}

package/lib/components/scrollbar/src/thumb.js

@@ -2,19 +2,67 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
+require('../../../tokens/index.js');
 require('../../../utils/index.js');
-var props = require('../../../utils/vue/props.js');
+require('../../../hooks/index.js');
+var util = require('./util.js');
+var thumb = require('./thumb2.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var scrollbar = require('../../../tokens/scrollbar.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var error = require('../../../utils/error.js');
 
-const thumbProps = props.buildProps({
-  vertical: Boolean,
-  size: String,
-  move: Number,
-  ratio: {
-    type: Number,
-    required: true
-  },
-  always: Boolean
+const COMPONENT_NAME = "Thumb";
+const _sfc_main = vue.defineComponent({
+  name: COMPONENT_NAME,
+  props: thumb.thumbProps,
+  setup(props) {
+    const scrollbar$1 = vue.inject(scrollbar.scrollbarContextKey);
+    const ns = index.useNamespace("scrollbar");
+    if (!scrollbar$1)
+      error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
+    const instance = vue.ref();
+    const thumb = vue.ref();
+    const visible = vue.ref(false);
+    const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
+    const thumbStyle = vue.computed(() => util.renderThumbStyle({
+      size: props.size,
+      move: props.move,
+      bar: bar.value
+    }));
+    return {
+      ns,
+      instance,
+      thumb,
+      bar,
+      thumbStyle,
+      visible
+    };
+  }
 });
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.Transition, {
+    name: _ctx.ns.b("fade")
+  }, {
+    default: vue.withCtx(() => [
+      vue.withDirectives(vue.createElementVNode("div", {
+        ref: "instance",
+        class: vue.normalizeClass([_ctx.ns.e("bar"), _ctx.ns.is(_ctx.bar.key)])
+      }, [
+        vue.createElementVNode("div", {
+          ref: "thumb",
+          class: vue.normalizeClass(_ctx.ns.e("thumb")),
+          style: vue.normalizeStyle(_ctx.thumbStyle)
+        }, null, 6)
+      ], 2), [
+        [vue.vShow, _ctx.always || _ctx.visible]
+      ])
+    ]),
+    _: 1
+  }, 8, ["name"]);
+}
+var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/scrollbar/src/thumb.vue"]]);
 
-exports.thumbProps = thumbProps;
+exports["default"] = Thumb;
 //# sourceMappingURL=thumb.js.map

package/lib/components/scrollbar/src/thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumb.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-ps/utils'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const thumbProps = buildProps({\n  vertical: Boolean,\n  size: String,\n  move: Number,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  always: Boolean,\n} as const)\nexport type ThumbProps = ExtractPropTypes<typeof thumbProps>\n"],"names":["buildProps"],"mappings":";;;;;;;AACY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,CAAC;;;;"}
+{"version":3,"file":"thumb.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  ref,\n} from 'vue'\nimport { scrollbarContextKey } from '@element-ps/tokens'\nimport { throwError } from '@element-ps/utils'\nimport { useNamespace } from '@element-ps/hooks'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: thumbProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    const ns = useNamespace('scrollbar')\n\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const visible = ref(false)\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    return {\n      ns,\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","thumbProps","scrollbar","inject","scrollbarContextKey","useNamespace","throwError","ref","computed","BAR_MAP","renderThumbStyle","_createBlock","_Transition","_withDirectives","_createElementVNode","_normalizeClass","_normalizeStyle","_vShow"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,cAAiB,GAAA,OAAA,CAAA;AACvB,MAAK,YAAaA,mBAAa,CAAA;AAAA,EAC7B,IAAM,EAAA,cAAA;AAAA,EACN,KAAO,EAAAC,gBAAA;AAAA,EAEP,MAAM,KAAO,EAAA;AACX,IAAM,MAAAC,WAAA,GAAYC,WAAOC,6BAAmB,CAAA,CAAA;AAC5C,IAAM,MAAA,EAAA,GAAKC,mBAAa,WAAW,CAAA,CAAA;AAEnC,IAAA,IAAI,CAACH,WAAA;AACH,MAAAI,gBAAA,CAAW,gBAAgB,kCAAkC,CAAA,CAAA;AAE/D,IAAA,MAAM,WAAWC,OAAoB,EAAA,CAAA;AACrC,IAAA,MAAM,QAAQA,OAAoB,EAAA,CAAA;AAElC,IAAM,MAAA,OAAA,GAAUA,QAAI,KAAK,CAAA,CAAA;AAEzB,IAAA,MAAM,MAAMC,YACV,CAAA,MAAMC,aAAQ,KAAM,CAAA,QAAA,GAAW,aAAa,YAC9C,CAAA,CAAA,CAAA;AAEA,IAAM,MAAA,UAAA,GAAaD,YAAS,CAAA,MAC1BE,qBAAiB,CAAA;AAAA,MACf,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,KAAK,GAAI,CAAA,KAAA;AAAA,KACV,CACH,CAAA,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,EAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAC,CAAA,CAAA;;0BAnECC,eAYa,CAAAC,cAAA,EAAA;AAAA,IAZA,IAAA,EAAM,QAAG,CAAC,CAAA,MAAA,CAAA;AAAA,GAAA,EAAA;yBACrB,MAUM;AAAA,MAAAC,kBAAA,CAVNC,sBAUM,CAAA,KAAA,EAAA;AAAA,QARJ,GAAI,EAAA,UAAA;AAAA,QACH,KAAA,EAAKC,oBAAG,IAAG,CAAA,EAAA,CAAA,CAAA,CAAC,QAAS,IAAG,CAAA,EAAA,CAAA,EAAA,CAAG,SAAI,GAAG,CAAA,CAAA,CAAA;AAAA,OAAA,EAAA;QAEnCD,sBAIE,CAAA,KAAA,EAAA;AAAA,UAHA,GAAI,EAAA,OAAA;AAAA,UACH,KAAA,EAAKC,kBAAE,CAAA,IAAA,CAAA,EAAA,CAAG,CAAC,CAAA,OAAA,CAAA,CAAA;AAAA,UACX,KAAA,EAAKC,mBAAE,IAAU,CAAA,UAAA,CAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;AAPZ,QAAA,CAAAC,SAAA,EAAA,IAAA,CAAA,MAAA,IAAU,IAAO,CAAA,OAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;"}

package/lib/components/scrollbar/src/thumb2.js

@@ -2,67 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-require('../../../tokens/index.js');
 require('../../../utils/index.js');
-require('../../../hooks/index.js');
-var util = require('./util.js');
-var thumb = require('./thumb.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var scrollbar = require('../../../tokens/scrollbar.js');
-var index = require('../../../hooks/use-namespace/index.js');
-var error = require('../../../utils/error.js');
+var props = require('../../../utils/vue/props.js');
 
-const COMPONENT_NAME = "Thumb";
-const _sfc_main = vue.defineComponent({
-  name: COMPONENT_NAME,
-  props: thumb.thumbProps,
-  setup(props) {
-    const scrollbar$1 = vue.inject(scrollbar.scrollbarContextKey);
-    const ns = index.useNamespace("scrollbar");
-    if (!scrollbar$1)
-      error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
-    const instance = vue.ref();
-    const thumb = vue.ref();
-    const visible = vue.ref(false);
-    const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
-    const thumbStyle = vue.computed(() => util.renderThumbStyle({
-      size: props.size,
-      move: props.move,
-      bar: bar.value
-    }));
-    return {
-      ns,
-      instance,
-      thumb,
-      bar,
-      thumbStyle,
-      visible
-    };
-  }
+const thumbProps = props.buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createBlock(vue.Transition, {
-    name: _ctx.ns.b("fade")
-  }, {
-    default: vue.withCtx(() => [
-      vue.withDirectives(vue.createElementVNode("div", {
-        ref: "instance",
-        class: vue.normalizeClass([_ctx.ns.e("bar"), _ctx.ns.is(_ctx.bar.key)])
-      }, [
-        vue.createElementVNode("div", {
-          ref: "thumb",
-          class: vue.normalizeClass(_ctx.ns.e("thumb")),
-          style: vue.normalizeStyle(_ctx.thumbStyle)
-        }, null, 6)
-      ], 2), [
-        [vue.vShow, _ctx.always || _ctx.visible]
-      ])
-    ]),
-    _: 1
-  }, 8, ["name"]);
-}
-var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/scrollbar/src/thumb.vue"]]);
 
-exports["default"] = Thumb;
+exports.thumbProps = thumbProps;
 //# sourceMappingURL=thumb2.js.map

package/lib/components/scrollbar/src/thumb2.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumb2.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  ref,\n} from 'vue'\nimport { scrollbarContextKey } from '@element-ps/tokens'\nimport { throwError } from '@element-ps/utils'\nimport { useNamespace } from '@element-ps/hooks'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: thumbProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    const ns = useNamespace('scrollbar')\n\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const visible = ref(false)\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    return {\n      ns,\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","thumbProps","scrollbar","inject","scrollbarContextKey","useNamespace","throwError","ref","computed","BAR_MAP","renderThumbStyle","_createBlock","_Transition","_withDirectives","_createElementVNode","_normalizeClass","_normalizeStyle","_vShow"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,cAAiB,GAAA,OAAA,CAAA;AACvB,MAAK,YAAaA,mBAAa,CAAA;AAAA,EAC7B,IAAM,EAAA,cAAA;AAAA,EACN,KAAO,EAAAC,gBAAA;AAAA,EAEP,MAAM,KAAO,EAAA;AACX,IAAM,MAAAC,WAAA,GAAYC,WAAOC,6BAAmB,CAAA,CAAA;AAC5C,IAAM,MAAA,EAAA,GAAKC,mBAAa,WAAW,CAAA,CAAA;AAEnC,IAAA,IAAI,CAACH,WAAA;AACH,MAAAI,gBAAA,CAAW,gBAAgB,kCAAkC,CAAA,CAAA;AAE/D,IAAA,MAAM,WAAWC,OAAoB,EAAA,CAAA;AACrC,IAAA,MAAM,QAAQA,OAAoB,EAAA,CAAA;AAElC,IAAM,MAAA,OAAA,GAAUA,QAAI,KAAK,CAAA,CAAA;AAEzB,IAAA,MAAM,MAAMC,YACV,CAAA,MAAMC,aAAQ,KAAM,CAAA,QAAA,GAAW,aAAa,YAC9C,CAAA,CAAA,CAAA;AAEA,IAAM,MAAA,UAAA,GAAaD,YAAS,CAAA,MAC1BE,qBAAiB,CAAA;AAAA,MACf,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,KAAK,GAAI,CAAA,KAAA;AAAA,KACV,CACH,CAAA,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,EAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAC,CAAA,CAAA;;0BAnECC,eAYa,CAAAC,cAAA,EAAA;AAAA,IAZA,IAAA,EAAM,QAAG,CAAC,CAAA,MAAA,CAAA;AAAA,GAAA,EAAA;yBACrB,MAUM;AAAA,MAAAC,kBAAA,CAVNC,sBAUM,CAAA,KAAA,EAAA;AAAA,QARJ,GAAI,EAAA,UAAA;AAAA,QACH,KAAA,EAAKC,oBAAG,IAAG,CAAA,EAAA,CAAA,CAAA,CAAC,QAAS,IAAG,CAAA,EAAA,CAAA,EAAA,CAAG,SAAI,GAAG,CAAA,CAAA,CAAA;AAAA,OAAA,EAAA;QAEnCD,sBAIE,CAAA,KAAA,EAAA;AAAA,UAHA,GAAI,EAAA,OAAA;AAAA,UACH,KAAA,EAAKC,kBAAE,CAAA,IAAA,CAAA,EAAA,CAAG,CAAC,CAAA,OAAA,CAAA,CAAA;AAAA,UACX,KAAA,EAAKC,mBAAE,IAAU,CAAA,UAAA,CAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;AAPZ,QAAA,CAAAC,SAAA,EAAA,IAAA,CAAA,MAAA,IAAU,IAAO,CAAA,OAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"thumb2.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-ps/utils'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const thumbProps = buildProps({\n  vertical: Boolean,\n  size: String,\n  move: Number,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  always: Boolean,\n} as const)\nexport type ThumbProps = ExtractPropTypes<typeof thumbProps>\n"],"names":["buildProps"],"mappings":";;;;;;;AACY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,CAAC;;;;"}