reka-ui/dist/ScrollArea/ScrollAreaScrollbarAuto.cjs

Vue port for Radix UI Primitives.

'use strict';

const vue = require('vue');
const core = require('@vueuse/core');
const ScrollArea_ScrollAreaScrollbarVisible = require('./ScrollAreaScrollbarVisible.cjs');
const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
const Presence_Presence = require('../Presence/Presence.cjs');
const ScrollArea_ScrollAreaRoot = require('./ScrollAreaRoot.cjs');
const ScrollArea_ScrollAreaScrollbar = require('./ScrollAreaScrollbar.cjs');

const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "ScrollAreaScrollbarAuto",
  props: {
    forceMount: { type: Boolean }
  },
  setup(__props) {
    const rootContext = ScrollArea_ScrollAreaRoot.injectScrollAreaRootContext();
    const scrollbarContext = ScrollArea_ScrollAreaScrollbar.injectScrollAreaScrollbarContext();
    const { forwardRef } = shared_useForwardExpose.useForwardExpose();
    const visible = vue.ref(false);
    const handleResize = core.useDebounceFn(() => {
      if (rootContext.viewport.value) {
        const isOverflowX = rootContext.viewport.value.offsetWidth < rootContext.viewport.value.scrollWidth;
        const isOverflowY = rootContext.viewport.value.offsetHeight < rootContext.viewport.value.scrollHeight;
        visible.value = scrollbarContext.isHorizontal.value ? isOverflowX : isOverflowY;
      }
    }, 10);
    vue.onMounted(() => handleResize());
    core.useResizeObserver(rootContext.viewport, handleResize);
    core.useResizeObserver(rootContext.content, handleResize);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(Presence_Presence.Presence), {
        present: _ctx.forceMount || visible.value
      }, {
        default: vue.withCtx(() => [
          vue.createVNode(ScrollArea_ScrollAreaScrollbarVisible._sfc_main, vue.mergeProps(_ctx.$attrs, {
            ref: vue.unref(forwardRef),
            "data-state": visible.value ? "visible" : "hidden"
          }), {
            default: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          }, 16, ["data-state"])
        ]),
        _: 3
      }, 8, ["present"]);
    };
  }
});

exports._sfc_main = _sfc_main;
//# sourceMappingURL=ScrollAreaScrollbarAuto.cjs.map