@meethive/components 0.0.11 → 0.0.13

package/es/DragModal/DragModal.js

@@ -1,12 +1,22 @@
-import { defineComponent, ref, useSlots, computed, onMounted, watch } from 'vue';
+import { defineComponent as _defineComponent } from 'vue';
+import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createTextVNode as _createTextVNode, Transition as _Transition, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "header"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "jetlinks-drag-modal-footer"
+};
+import { ref, useSlots, computed, onMounted, watch } from 'vue';
 import { Button } from 'ant-design-vue';
 import { useLocaleReceiver } from '../LocaleReciver/index';
 import genDragModalStyle from './style';
-export default defineComponent({
-  name: 'JDragModal',
-  components: {
-    Button
+const __sfc_main__ = _defineComponent({
+  ...{
+    name: 'JDragModal'
   },
+  __name: 'DragModal',
   props: {
     title: {
       type: [String, Boolean],
@@ -34,9 +44,11 @@ export default defineComponent({
     }
   },
   emits: ['cancel', 'heightChange', 'ok', 'visibleChange'],
-  setup(props, {
-    emit
+  setup(__props, {
+    emit: __emit
   }) {
+    const props = __props;
+    const emits = __emit;
     const slots = useSlots();
     const [contextLocale] = useLocaleReceiver('DragModal');
     const ele = document.body;
@@ -149,18 +161,18 @@ export default defineComponent({
           }
           const height = baseHeight.value + calc;
           baseHeight.value = height <= props.dragRang[1] ? props.dragRang[1] : height;
-          emit('heightChange', baseHeight.value);
+          emits('heightChange', baseHeight.value);
         }
       };
       handleClear();
     };
     const onCancel = () => {
-      emit('cancel');
-      emit('visibleChange', false);
+      emits('cancel');
+      emits('visibleChange', false);
     };
     const onOk = () => {
-      emit('ok');
-      emit('visibleChange', true);
+      emits('ok');
+      emits('visibleChange', true);
     };
     onMounted(() => {
       if (dialog.value && header.value) {
@@ -177,15 +189,55 @@ export default defineComponent({
         baseHeight.value = props.height;
       }
     });
-    return {
-      dialog,
-      header,
-      styles,
-      hashId,
-      contextLocale,
-      rangeMove,
-      onCancel,
-      onOk
+    return (_ctx, _cache) => {
+      const _component_AIcon = _resolveComponent("AIcon");
+      const _component_a_button = _resolveComponent("a-button");
+      const _component_a_space = _resolveComponent("a-space");
+      return _openBlock(), _createElementBlock("div", {
+        ref_key: "dialog",
+        ref: dialog,
+        style: _normalizeStyle(styles.value),
+        class: _normalizeClass(['jetlinks-drag-modal', _unref(hashId)])
+      }, [_createVNode(_Transition, {
+        name: "dialog"
+      }, {
+        default: _withCtx(() => [_createElementVNode("div", {
+          class: "jetlinks-drag-modal-sprite",
+          ref_key: "header",
+          ref: header
+        }, [__props.title !== false ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("span", null, _toDisplayString(__props.title), 1 /* TEXT */), _createVNode(_component_a_button, {
+          size: "small",
+          type: "text",
+          onClick: _withModifiers(onCancel, ["stop"])
+        }, {
+          default: _withCtx(() => [_createVNode(_component_AIcon, {
+            type: "CloseOutlined"
+          })]),
+          _: 1 /* STABLE */
+        })])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+          class: "jetlinks-drag-modal-body",
+          style: _normalizeStyle(__props.bodyStyle)
+        }, [_renderSlot(_ctx.$slots, "default")], 4 /* STYLE */), __props.footer !== false ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "footer", {}, () => [_createVNode(_component_a_space, null, {
+          default: _withCtx(() => [_createVNode(_unref(Button), {
+            onClick: _withModifiers(onCancel, ["stop"])
+          }, {
+            default: _withCtx(() => [_createTextVNode(_toDisplayString(_unref(contextLocale).cancel), 1 /* TEXT */)]),
+            _: 1 /* STABLE */
+          }), _createVNode(_unref(Button), {
+            type: "primary",
+            onClick: _withModifiers(onOk, ["stop"])
+          }, {
+            default: _withCtx(() => [_createTextVNode(_toDisplayString(_unref(contextLocale).confirm), 1 /* TEXT */)]),
+            _: 1 /* STABLE */
+          })]),
+          _: 1 /* STABLE */
+        })])])) : _createCommentVNode("v-if", true)], 512 /* NEED_PATCH */)]),
+        _: 3 /* FORWARDED */
+      }), _createElementVNode("div", {
+        class: _normalizeClass(['jetlinks-drag-modal-range', 'drag-bottom-right']),
+        onMousedown: _cache[0] || (_cache[0] = _withModifiers($event => rangeMove($event, 'drag-bottom-right'), ["stop"]))
+      }, null, 32 /* NEED_HYDRATION */)], 6 /* CLASS, STYLE */);
     };
   }
-});
+});
+export default __sfc_main__;

package/es/Ellipsis/Ellipsis.js

@@ -1,14 +1,16 @@
-import { defineComponent, computed, ref, useAttrs, mergeProps } from 'vue';
+import { defineComponent as _defineComponent } from 'vue';
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, createElementVNode as _createElementVNode, unref as _unref, normalizeClass as _normalizeClass, withCtx as _withCtx, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { computed, ref, useAttrs, mergeProps } from 'vue';
 import { Tooltip } from 'ant-design-vue';
 import useEllipsisStyle from './style';
 const jEllipsis = 'j-ellipsis';
 const jEllipsisCursorClass = 'j-ellipsis-cursor';
 const jEllipsisLineClampClass = 'j-ellipsis-line-clamp';
-export default defineComponent({
-  name: 'JEllipsis',
-  components: {
-    Tooltip
+const __sfc_main__ = _defineComponent({
+  ...{
+    name: 'JEllipsis'
   },
+  __name: 'Ellipsis',
   props: {
     expandTrigger: {
       type: String,
@@ -24,7 +26,8 @@ export default defineComponent({
       default: true
     }
   },
-  setup(props) {
+  setup(__props) {
+    const props = __props;
     const prefixCls = computed(() => 'j-ellipsis');
     const [wrapSSR, hashId] = useEllipsisStyle(prefixCls);
 
@@ -127,18 +130,31 @@ export default defineComponent({
       }
       return tooltipDisabled;
     };
-    return {
-      jEllipsis,
-      jEllipsisCursorClass,
-      jEllipsisLineClampClass,
-      hashId,
-      tooltipRef,
-      triggerRef,
-      visible,
-      handleClickRef,
-      triggerAttrs,
-      showTooltip,
-      getTooltipDisabled
+    return (_ctx, _cache) => {
+      return _openBlock(), _createBlock(_unref(Tooltip), _mergeProps({
+        ref_key: "tooltipRef",
+        ref: tooltipRef,
+        placement: "top"
+      }, __props.tooltip, {
+        open: visible.value && __props.tooltip !== false
+      }), _createSlots({
+        default: _withCtx(() => [_createElementVNode("span", _mergeProps({
+          ref_key: "triggerRef",
+          ref: triggerRef
+        }, triggerAttrs(), {
+          onClick: _cache[0] || (_cache[0] = $event => handleClickRef.value && handleClickRef.value()),
+          onMouseleave: _cache[1] || (_cache[1] = $event => visible.value = false),
+          onMouseenter: _cache[2] || (_cache[2] = $event => __props.expandTrigger === 'click' ? getTooltipDisabled() : showTooltip())
+        }), [_renderSlot(_ctx.$slots, "default")], 16 /* FULL_PROPS */)]),
+        _: 2 /* DYNAMIC */
+      }, [__props.tooltip ? {
+        name: "title",
+        fn: _withCtx(() => [_createElementVNode("div", {
+          class: _normalizeClass([jEllipsisLineClampClass, jEllipsis, 'j-ellipsis-deep', _unref(hashId)])
+        }, [_renderSlot(_ctx.$slots, "default"), _renderSlot(_ctx.$slots, "tooltip")], 2 /* CLASS */)]),
+        key: "0"
+      } : undefined]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["open"]);
     };
   }
-});
+});
+export default __sfc_main__;

package/es/PermissionButton/PermissionButton.js

@@ -1,4 +1,6 @@
-import { defineComponent, computed, inject, getCurrentInstance, toRefs } from 'vue';
+import { defineComponent as _defineComponent } from 'vue';
+import { createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, unref as _unref, mergeProps as _mergeProps, withCtx as _withCtx, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, normalizeProps as _normalizeProps, Fragment as _Fragment, createElementBlock as _createElementBlock, createVNode as _createVNode } from "vue";
+import { computed, inject, toRefs } from 'vue';
 import { Button, Tooltip, Modal } from 'ant-design-vue';
 import { omit } from 'lodash-es';
 import { buttonProps } from 'ant-design-vue/es/button/button';
@@ -6,39 +8,35 @@ import { usePermission } from '@meethive/hooks';
 import confirm from './confirm';
 import { PermissionButtonConfig } from '../utils/constants';
 import { useLocaleReceiver } from '../LocaleReciver';
-const definedProps = {
-  tooltip: {
-    type: Object
+const __sfc_main__ = _defineComponent({
+  ...{
+    name: 'JPermissionButton'
   },
-  popConfirm: {
-    type: Object
+  __name: 'PermissionButton',
+  props: {
+    tooltip: {
+      type: Object
+    },
+    popConfirm: {
+      type: Object
+    },
+    hasPermission: {
+      type: [String, Array, Boolean],
+      default: undefined
+    },
+    style: {
+      type: Object
+    },
+    noPermissionTitle: {
+      type: String
+    },
+    popConfirmBefore: {
+      type: Function
+    },
+    ...omit(buttonProps(), 'icon')
   },
-  hasPermission: {
-    type: [String, Array, Boolean],
-    default: undefined
-  },
-  style: {
-    type: Object
-  },
-  noPermissionTitle: {
-    type: String
-  },
-  popConfirmBefore: {
-    type: Function
-  },
-  ...omit(buttonProps(), 'icon')
-};
-export default defineComponent({
-  name: 'JPermissionButton',
-  components: {
-    Button,
-    Tooltip
-  },
-  // @ts-ignore
-  slots: ['button', 'icon'],
-  props: definedProps,
-  setup(props) {
-    const instance = getCurrentInstance();
+  setup(__props) {
+    const props = __props;
     const propsRef = toRefs(props);
     const {
       hasPerm
@@ -61,6 +59,28 @@ export default defineComponent({
     });
     const hasTooltip = computed(() => !!props.tooltip); // 是否包含文字提示
 
+    // popConfirm 点击处理
+    const handleClick = async () => {
+      const _popConfirm = (await props.popConfirmBefore?.()) || props.popConfirm;
+      if (context.components) {
+        confirm({
+          ..._popConfirm,
+          danger: props.danger
+        }, context.components);
+      } else {
+        Modal.confirm({
+          title: _popConfirm.title,
+          content: _popConfirm.content,
+          onOk: () => {
+            return _popConfirm.onConfirm?.();
+          },
+          onCancel: () => {
+            _popConfirm.onCancel?.();
+          }
+        });
+      }
+    };
+
     // 排除不传递给 Button 的属性 (与 ES 原版 _excluded 一致)
     const computedButtonProps = computed(() => {
       const {
@@ -83,36 +103,64 @@ export default defineComponent({
         disabled: isPermission.value
       });
     });
-
-    // popConfirm 点击处理
-    const handleClick = async () => {
-      const _popConfirm = (await props.popConfirmBefore?.()) || props.popConfirm;
-      if (context.components) {
-        confirm({
-          ..._popConfirm,
-          danger: props.danger
-        }, context.components);
-      } else {
-        Modal.confirm({
-          title: _popConfirm.title,
-          content: _popConfirm.content,
-          onOk: () => {
-            return _popConfirm.onConfirm?.();
-          },
-          onCancel: () => {
-            _popConfirm.onCancel?.();
-          }
-        });
-      }
-    };
-    return {
-      permission,
-      isPermission,
-      hasTooltip,
-      computedButtonProps,
-      tooltipProps,
-      contextLocale,
-      handleClick
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(_Fragment, null, [_createCommentVNode(" 有权限 "), permission.value ? (_openBlock(), _createElementBlock(_Fragment, {
+        key: 0
+      }, [_createCommentVNode(" 有 tooltip "), hasTooltip.value ? (_openBlock(), _createBlock(_unref(Tooltip), _normalizeProps(_mergeProps({
+        key: 0
+      }, tooltipProps.value)), {
+        default: _withCtx(() => [_ctx.$slots.button ? _renderSlot(_ctx.$slots, "button", {
+          key: 0
+        }) : (_openBlock(), _createBlock(_unref(Button), _mergeProps({
+          key: 1
+        }, computedButtonProps.value, {
+          disabled: isPermission.value
+        }), _createSlots({
+          default: _withCtx(() => [_renderSlot(_ctx.$slots, "default")]),
+          _: 2 /* DYNAMIC */
+        }, [_ctx.$slots.icon ? {
+          name: "icon",
+          fn: _withCtx(() => [_renderSlot(_ctx.$slots, "icon")]),
+          key: "0"
+        } : undefined]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["disabled"]))]),
+        _: 3 /* FORWARDED */
+      }, 16 /* FULL_PROPS */)) : (_openBlock(), _createElementBlock(_Fragment, {
+        key: 1
+      }, [_createCommentVNode(" 无 tooltip "), _ctx.$slots.button ? _renderSlot(_ctx.$slots, "button", {
+        key: 0
+      }) : (_openBlock(), _createBlock(_unref(Button), _mergeProps({
+        key: 1
+      }, computedButtonProps.value, {
+        disabled: isPermission.value
+      }), _createSlots({
+        default: _withCtx(() => [_renderSlot(_ctx.$slots, "default")]),
+        _: 2 /* DYNAMIC */
+      }, [_ctx.$slots.icon ? {
+        name: "icon",
+        fn: _withCtx(() => [_renderSlot(_ctx.$slots, "icon")]),
+        key: "0"
+      } : undefined]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["disabled"]))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (_openBlock(), _createElementBlock(_Fragment, {
+        key: 1
+      }, [_createCommentVNode(" 无权限 "), _createVNode(_unref(Tooltip), {
+        title: _ctx.noPermissionTitle || _unref(contextLocale)?.hasPermission
+      }, {
+        default: _withCtx(() => [_ctx.$slots.button ? _renderSlot(_ctx.$slots, "button", {
+          key: 0
+        }) : (_openBlock(), _createBlock(_unref(Button), _mergeProps({
+          key: 1
+        }, computedButtonProps.value, {
+          disabled: isPermission.value
+        }), _createSlots({
+          default: _withCtx(() => [_renderSlot(_ctx.$slots, "default")]),
+          _: 2 /* DYNAMIC */
+        }, [_ctx.$slots.icon ? {
+          name: "icon",
+          fn: _withCtx(() => [_renderSlot(_ctx.$slots, "icon")]),
+          key: "0"
+        } : undefined]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["disabled"]))]),
+        _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["title"])], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */);
     };
   }
-});
+});
+export default __sfc_main__;

package/es/Scrollbar/Bar.js

@@ -1,12 +1,14 @@
-import { defineComponent, inject, ref } from 'vue';
+import { defineComponent as _defineComponent } from 'vue';
+import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { inject, ref } from 'vue';
 import { GAP } from './util';
 import Thumb from './Thumb.js';
 import { scrollbarContextKey } from './constants';
-export default defineComponent({
-  name: 'ScrollbarBar',
-  components: {
-    Thumb
+const __sfc_main__ = _defineComponent({
+  ...{
+    name: 'ScrollbarBar'
   },
+  __name: 'Bar',
   props: {
     always: {
       type: Boolean,
@@ -17,9 +19,10 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props, {
-    expose
+  setup(__props, {
+    expose: __expose
   }) {
+    const props = __props;
     const scrollbar = inject(scrollbarContextKey);
     const moveX = ref(0);
     const moveY = ref(0);
@@ -49,17 +52,24 @@ export default defineComponent({
       sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : '';
       sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : '';
     };
-    expose({
+    __expose({
       handleScroll,
       update
     });
-    return {
-      moveX,
-      moveY,
-      sizeWidth,
-      sizeHeight,
-      ratioY,
-      ratioX
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(_Fragment, null, [_createVNode(Thumb, {
+        move: moveX.value,
+        ratio: ratioX.value,
+        size: sizeWidth.value,
+        always: __props.always
+      }, null, 8 /* PROPS */, ["move", "ratio", "size", "always"]), _createVNode(Thumb, {
+        move: moveY.value,
+        ratio: ratioY.value,
+        size: sizeHeight.value,
+        vertical: "",
+        always: __props.always
+      }, null, 8 /* PROPS */, ["move", "ratio", "size", "always"])], 64 /* STABLE_FRAGMENT */);
     };
   }
-});
+});
+export default __sfc_main__;

package/es/Scrollbar/Scrollbar.js

@@ -1,4 +1,6 @@
-import { defineComponent, computed, nextTick, onMounted, onUpdated, provide, reactive, ref, watch } from 'vue';
+import { defineComponent as _defineComponent } from 'vue';
+import { unref as _unref, renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock } from "vue";
+import { 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';
@@ -6,17 +8,19 @@ 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
+const __sfc_main__ = _defineComponent({
+  ...{
+    name: COMPONENT_NAME
   },
+  __name: 'Scrollbar',
   props: scrollbarProps,
   emits: scrollbarEmits,
-  setup(props, {
-    expose,
-    emit
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
   }) {
+    const props = __props;
+    const emit = __emit;
     const prefixCls = computed(() => 'j-scrollbar');
     const [wrapSSR, hashId] = useScrollbarStyle(prefixCls);
     let stopResizeObserver = undefined;
@@ -100,7 +104,7 @@ export default defineComponent({
       });
     });
     onUpdated(() => update());
-    expose({
+    __expose({
       /** @description scrollbar wrap ref */
       wrapRef,
       /** @description update scrollbar state manually */
@@ -114,16 +118,36 @@ export default defineComponent({
       /** @description handle scroll event */
       handleScroll
     });
-    return {
-      hashId,
-      scrollbarRef,
-      wrapRef,
-      resizeRef,
-      barRef,
-      wrapStyle,
-      wrapKls,
-      resizeKls,
-      handleScroll
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        ref_key: "scrollbarRef",
+        ref: scrollbarRef,
+        class: _normalizeClass(['j-scrollbar', _unref(hashId)])
+      }, [_createElementVNode("div", {
+        ref_key: "wrapRef",
+        ref: wrapRef,
+        class: _normalizeClass(wrapKls.value),
+        style: _normalizeStyle(wrapStyle.value),
+        onScroll: handleScroll
+      }, [(_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+        id: _ctx.id,
+        ref_key: "resizeRef",
+        ref: resizeRef,
+        class: _normalizeClass(resizeKls.value),
+        role: _ctx.role,
+        "aria-label": _ctx.ariaLabel,
+        "aria-orientation": _ctx.ariaOrientation
+      }, {
+        default: _withCtx(() => [_renderSlot(_ctx.$slots, "default")]),
+        _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["id", "class", "role", "aria-label", "aria-orientation"]))], 38 /* CLASS, STYLE, NEED_HYDRATION */), !_ctx.native ? (_openBlock(), _createBlock(Bar, {
+        key: 0,
+        ref_key: "barRef",
+        ref: barRef,
+        always: _ctx.always,
+        "min-size": _ctx.minSize
+      }, null, 8 /* PROPS */, ["always", "min-size"])) : _createCommentVNode("v-if", true)], 2 /* CLASS */);
     };
   }
-});
+});
+export default __sfc_main__;

package/es/Scrollbar/Thumb.js

@@ -1,14 +1,20 @@
-import { defineComponent, computed, inject, onBeforeUnmount, ref, toRef } from 'vue';
+import { defineComponent as _defineComponent } from 'vue';
+import { unref as _unref, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, vShow as _vShow, normalizeClass as _normalizeClass, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { computed, inject, onBeforeUnmount, ref, toRef } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import { isClient } from '@meethive/utils';
 import { scrollbarContextKey } from './constants';
 import { BAR_MAP, renderThumbStyle } from './util';
 import { thumbProps } from './thumbProps';
 import useScrollbarStyle from './style';
-export default defineComponent({
-  name: 'ScrollbarThumb',
+const __sfc_main__ = _defineComponent({
+  ...{
+    name: 'ScrollbarThumb'
+  },
+  __name: 'Thumb',
   props: thumbProps,
-  setup(props) {
+  setup(__props) {
+    const props = __props;
     const scrollbar = inject(scrollbarContextKey);
     if (!scrollbar) throw new Error('can not inject scrollbar context');
     const instance = ref();
@@ -87,15 +93,28 @@ export default defineComponent({
     };
     useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mousemove', mouseMoveScrollbarHandler);
     useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mouseleave', mouseLeaveScrollbarHandler);
-    return {
-      props,
-      instance,
-      thumb,
-      visible,
-      hashId,
-      thumbStyle,
-      clickThumbHandler,
-      clickTrackHandler
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        class: _normalizeClass([_unref(hashId)])
+      }, [_createVNode(_Transition, {
+        name: "j-scrollbar-fade",
+        persisted: ""
+      }, {
+        default: _withCtx(() => [_withDirectives(_createElementVNode("div", {
+          ref_key: "instance",
+          ref: instance,
+          class: _normalizeClass(['j-scrollbar__bar', props.vertical ? 'is-vertical' : 'is-horizontal']),
+          onMousedown: clickTrackHandler
+        }, [_createElementVNode("div", {
+          ref_key: "thumb",
+          ref: thumb,
+          class: "j-scrollbar__thumb",
+          style: _normalizeStyle(thumbStyle.value),
+          onMousedown: clickThumbHandler
+        }, null, 36 /* STYLE, NEED_HYDRATION */)], 34 /* CLASS, NEED_HYDRATION */), [[_vShow, _ctx.always || visible.value]])]),
+        _: 1 /* STABLE */
+      })], 2 /* CLASS */);
     };
   }
-});
+});
+export default __sfc_main__;