yc-design-vue 1.0.1

package/es/ResizeBox/index.vue2.js

@@ -0,0 +1,162 @@
+import { defineComponent, useSlots, toRefs, reactive, ref, createBlock, openBlock, resolveDynamicComponent, withCtx, renderSlot, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, createVNode, unref } from "vue";
+import { useEventListener, useResizeObserver } from "../node_modules/@vueuse/core/index.js";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import { valueToPx } from "../_shared/utils/fn.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+import useControlValue from "../_shared/utils/control.js";
+/* empty css                         */
+import _sfc_main$1 from "../_shared/icons/IconDragDot.vue.js";
+const _hoisted_1 = ["dir", "onMousedown"];
+const _hoisted_2 = { class: "yc-resizebox-trigger-icon-wrapper" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ResizeBox"
+  },
+  __name: "index",
+  props: {
+    width: { default: void 0 },
+    height: { default: void 0 },
+    component: { default: "div" },
+    directions: { default: () => ["right"] }
+  },
+  emits: ["update:width", "update:height", "moving-start", "moving", "moving-end"],
+  setup(__props, { emit: __emit }) {
+    useSlots();
+    const props = __props;
+    const emits = __emit;
+    const { width, height } = toRefs(props);
+    const computedWidth = useControlValue(width, 0, (val) => {
+      emits("update:width", val);
+    });
+    const computedHeight = useControlValue(height, 0, (val) => {
+      emits("update:height", val);
+    });
+    const triggeDoms = reactive([]);
+    const triggerSize = reactive({
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0
+    });
+    const boxRef = ref();
+    const dragDirection = ref(null);
+    const x = ref(0);
+    const y = ref(0);
+    let cursor;
+    const handleMovingStart = (dir, e) => {
+      e.preventDefault();
+      dragDirection.value = dir;
+      const { width: width2, height: height2 } = boxRef.value.getBoundingClientRect();
+      const { clientX, clientY } = e;
+      computedWidth.value = width2;
+      computedHeight.value = height2;
+      x.value = clientX;
+      y.value = clientY;
+      cursor = getComputedStyle(document.body).cursor;
+      document.body.style.cursor = ["left", "right"].includes(dir) ? "col-resize" : "row-resize";
+      emits("moving-start", e);
+    };
+    const handleMoving = async (e) => {
+      if (!dragDirection.value || !boxRef.value) {
+        return;
+      }
+      const { clientX, clientY } = e;
+      const movementX = dragDirection.value == "left" ? x.value - clientX : clientX - x.value;
+      const movementY = dragDirection.value == "top" ? y.value - clientY : clientY - y.value;
+      const minWidth = triggerSize.left + triggerSize.right;
+      const minHeight = triggerSize.top + triggerSize.bottom;
+      x.value = clientX;
+      y.value = clientY;
+      if (["left", "right"].includes(dragDirection.value)) {
+        computedWidth.value += movementX;
+        computedWidth.value <= minWidth && (computedWidth.value = minWidth);
+        boxRef.value.style.width = valueToPx(computedWidth.value);
+      } else {
+        computedHeight.value += movementY;
+        computedHeight.value <= minHeight && (computedHeight.value = minHeight);
+        boxRef.value.style.height = valueToPx(computedHeight.value);
+      }
+      const { width: width2, height: height2 } = boxRef.value.getBoundingClientRect();
+      if (computedWidth.value != width2) {
+        computedWidth.value = width2;
+      }
+      if (height2 != computedHeight.value) {
+        computedHeight.value = height2;
+      }
+      emits(
+        "moving",
+        {
+          width: width2,
+          height: height2
+        },
+        e
+      );
+    };
+    const handleMovingEnd = (e) => {
+      if (!dragDirection.value) return;
+      dragDirection.value = null;
+      document.body.style.cursor = cursor;
+      emits("moving-end", e);
+    };
+    useEventListener("mousemove", handleMoving);
+    useEventListener("mouseup", handleMovingEnd);
+    useResizeObserver(
+      () => {
+        return triggeDoms;
+      },
+      (entries) => {
+        entries.forEach((item) => {
+          const direction = item.target.getAttribute("dir");
+          const {
+            contentRect: { width: width2, height: height2 }
+          } = item;
+          triggerSize[direction] = ["right", "left"].includes(direction) ? width2 : height2;
+        });
+      },
+      {
+        box: "border-box"
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.component), {
+        class: "yc-resizebox",
+        ref_key: "boxRef",
+        ref: boxRef
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.directions, (dir, i) => {
+            return openBlock(), createElementBlock("div", {
+              key: dir,
+              class: normalizeClass([
+                "yc-resizebox-trigger",
+                `yc-resizebox-direction-${dir}`,
+                `yc-resizebox-trigger-${["left", "right"].includes(dir) ? "vertical" : "horizontal"}`
+              ]),
+              dir,
+              ref_for: true,
+              ref: (el) => triggeDoms[i] = el,
+              onMousedown: ($event) => handleMovingStart(dir, $event)
+            }, [
+              renderSlot(_ctx.$slots, "resize-trigger", { direction: dir }, () => [
+                createElementVNode("div", _hoisted_2, [
+                  renderSlot(_ctx.$slots, "resize-trigger-icon", { direction: dir }, () => [
+                    createVNode(unref(_sfc_main$1), {
+                      rotate: ["left", "right"].includes(dir) ? 90 : 0
+                    }, null, 8, ["rotate"])
+                  ], true)
+                ])
+              ], true)
+            ], 42, _hoisted_1);
+          }), 128))
+        ]),
+        _: 3
+      }, 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ResizeBox/type.d.ts

@@ -0,0 +1,26 @@
+export interface ResizeBoxProps {
+    width?: number;
+    height?: number;
+    component?: string;
+    directions?: ResizeBoxDirection[];
+}
+export interface ResizeBoxEmits {
+    (e: 'update:width', value: number): void;
+    (e: 'update:height', value: number): void;
+    (e: 'moving-start', ev: MouseEvent): void;
+    (e: 'moving', size: {
+        width: number;
+        height: number;
+    }, ev: MouseEvent): void;
+    (e: 'moving-end', ev: MouseEvent): void;
+}
+export interface ResizeBoxSlots {
+    default(): void;
+    ['resize-trigger'](scope: {
+        direction: ResizeBoxDirection;
+    }): void;
+    ['resize-trigger-icon'](scope: {
+        direction: ResizeBoxDirection;
+    }): void;
+}
+export type ResizeBoxDirection = 'left' | 'right' | 'top' | 'bottom';

package/es/Result/index.d.ts

@@ -0,0 +1,39 @@
+import { App } from 'vue';
+import { default as _Result } from './index.vue';
+export type ResultInstance = InstanceType<typeof _Result>;
+export * from './type';
+declare const Result: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./type').ResultProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        title: string;
+        status: import('./type').ResultStatus;
+        subtitle: string;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./type').ResultProps> & Readonly<{}>, {}, {}, {}, {}, {
+        title: string;
+        status: import('./type').ResultStatus;
+        subtitle: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./type').ResultProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    title: string;
+    status: import('./type').ResultStatus;
+    subtitle: string;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: Readonly<import('./type').ResultSlots> & import('./type').ResultSlots;
+}) & {
+    install: (app: App) => void;
+};
+declare module 'vue' {
+    interface GlobalComponents {
+        YcResult: typeof Result;
+    }
+}
+export default Result;

package/es/Result/index.js

@@ -0,0 +1,9 @@
+import _Result from "./index.vue.js";
+const Result = Object.assign(_Result, {
+  install: (app) => {
+    app.component("Yc" + _Result.name, _Result);
+  }
+});
+export {
+  Result as default
+};

package/es/Result/index.vue.d.ts

@@ -0,0 +1,20 @@
+import { ResultProps, ResultSlots } from './type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<ResultSlots> & ResultSlots;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ResultProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResultProps> & Readonly<{}>, {
+    title: string;
+    status: import('./type').ResultStatus;
+    subtitle: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Result/index.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.js";
+/* empty css           */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const _Result = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c5a501a4"]]);
+export {
+  _Result as default
+};

package/es/Result/index.vue2.js

@@ -0,0 +1,74 @@
+import { defineComponent, toRefs, createElementBlock, openBlock, createCommentVNode, unref, normalizeClass, createElementVNode, renderSlot, Fragment, createBlock, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
+import { TYPE_ICON_MAP } from "../_shared/constants/index.js";
+const _hoisted_1 = { class: "yc-result" };
+const _hoisted_2 = { class: "yc-result-icon-tip" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = {
+  key: 1,
+  class: "yc-result-title"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "yc-result-subtitle"
+};
+const _hoisted_6 = {
+  key: 3,
+  class: "yc-result-extra"
+};
+const _hoisted_7 = {
+  key: 4,
+  class: "yc-result-content"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Result"
+  },
+  __name: "index",
+  props: {
+    status: { default: "info" },
+    title: { default: "" },
+    subtitle: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { status } = toRefs(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.$slots.icon || unref(status) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["yc-result-icon", `yc-result-icon-${unref(status)}`])
+        }, [
+          createElementVNode("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              unref(status) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                ["403", "404", "500"].includes(unref(status)) ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  src: unref(TYPE_ICON_MAP)[`result-${unref(status)}`]
+                }, null, 8, _hoisted_3)) : (openBlock(), createBlock(resolveDynamicComponent(unref(TYPE_ICON_MAP)[`result-${unref(status)}`]), { key: 1 }))
+              ], 64)) : createCommentVNode("", true)
+            ], true)
+          ])
+        ], 2)) : createCommentVNode("", true),
+        _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "title", {}, () => [
+            createTextVNode(toDisplayString(_ctx.title), 1)
+          ], true)
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.subtitle || _ctx.subtitle ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          renderSlot(_ctx.$slots, "subtitle", {}, () => [
+            createTextVNode(toDisplayString(_ctx.subtitle), 1)
+          ], true)
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          renderSlot(_ctx.$slots, "extra", {}, void 0, true)
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Result/type.d.ts

@@ -0,0 +1,13 @@
+export interface ResultProps {
+    status?: ResultStatus;
+    title?: string;
+    subtitle?: string;
+}
+export interface ResultSlots {
+    icon(): void;
+    title(): void;
+    subtitle(): void;
+    default(): void;
+    extra(): void;
+}
+export type ResultStatus = 'info' | 'success' | 'warning' | 'error' | '403' | '404' | '500' | null;

package/es/Scrollbar/Scrollbar.vue.d.ts

@@ -0,0 +1,36 @@
+import { ScrollbarProps, ScrollbarSlots } from './type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<ScrollbarSlots> & ScrollbarSlots;
+    refs: {
+        scrollRef: HTMLDivElement;
+        contentRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ScrollbarProps, {
+    scrollTo(options: ScrollOptions): void;
+    scrollLeft(left: number): void;
+    scrollTop(top: number): void;
+    getScrollRef(): HTMLDivElement;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    scroll: (left: number, top: number, ev: Event) => any;
+}, string, import('vue').PublicProps, Readonly<ScrollbarProps> & Readonly<{
+    onScroll?: ((left: number, top: number, ev: Event) => any) | undefined;
+}>, {
+    scrollbar: boolean;
+    type: import('./type').TackType;
+    outerClass: import('../_shared/type').ClassName;
+    outerStyle: import('vue').CSSProperties;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollRef: HTMLDivElement;
+    contentRef: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Scrollbar/Scrollbar.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./Scrollbar.vue2.js";
+/* empty css               */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const _Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ac67eba2"]]);
+export {
+  _Scrollbar as default
+};

package/es/Scrollbar/Scrollbar.vue2.js

@@ -0,0 +1,226 @@
+import { defineComponent, toRefs, ref, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
+import { useResizeObserver, useElementSize } from "../node_modules/@vueuse/core/index.js";
+import ScrollbarTrack from "./ScrollbarTrack.vue.js";
+import useContext from "./hooks/useContext.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Scrollbar",
+    inheritAttrs: false
+  },
+  __name: "Scrollbar",
+  props: {
+    type: { default: "embed" },
+    outerClass: { default: "" },
+    outerStyle: { default: () => {
+      return {};
+    } },
+    scrollbar: { type: Boolean, default: true }
+  },
+  emits: ["scroll"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { type, scrollbar } = toRefs(props);
+    const contentRef = ref();
+    const scrollRef = ref();
+    const contentWidth = ref(0);
+    const contentHeight = ref(0);
+    useResizeObserver(contentRef, () => {
+      const { offsetWidth, offsetHeight } = contentRef.value;
+      contentWidth.value = offsetWidth;
+      contentHeight.value = offsetHeight;
+    });
+    const {
+      hasVerticalBar = ref(false),
+      hashorizontalBar = ref(false),
+      trackHeight = ref(0),
+      trackWidth = ref(0),
+      scrollWidth,
+      scrollHeight,
+      curLeft,
+      curTop,
+      movableLeft,
+      movableTop
+    } = initScrollbar();
+    const handleScroll = (e) => {
+      const {
+        scrollTop,
+        scrollLeft,
+        scrollWidth: _scrollWidth,
+        scrollHeight: _scrollHeight
+      } = e.target;
+      emits("scroll", scrollLeft, scrollTop, e);
+      if (!scrollbar.value) {
+        return;
+      }
+      const top = scrollTop / (contentHeight.value - scrollHeight.value) * movableTop.value;
+      curTop.value = top <= movableTop.value ? top : movableTop.value;
+      const left = scrollLeft / (contentWidth.value - scrollWidth.value) * movableLeft.value;
+      curLeft.value = left <= movableLeft.value ? left : movableLeft.value;
+    };
+    const handleDrag = (isVertical, value) => {
+      if (isVertical) {
+        curTop.value = value;
+        const maxScrollbarMoveTop = contentHeight.value - scrollHeight.value;
+        const scrollTop = curTop.value / movableTop.value * maxScrollbarMoveTop;
+        scrollRef.value.scrollTop = scrollTop >= maxScrollbarMoveTop ? maxScrollbarMoveTop : scrollTop;
+      } else {
+        curLeft.value = value;
+        const maxScrollbarMoveLeft = contentWidth.value - scrollWidth.value;
+        const scrollLeft = curLeft.value / movableLeft.value * maxScrollbarMoveLeft;
+        scrollRef.value.scrollLeft = scrollLeft >= maxScrollbarMoveLeft ? maxScrollbarMoveLeft : scrollLeft;
+      }
+    };
+    function initScrollbar() {
+      if (!scrollbar.value)
+        return {
+          hasVerticalBar: ref(false),
+          hashorizontalBar: ref(false),
+          trackHeight: ref(0),
+          trackWidth: ref(0),
+          contentWidth: ref(0),
+          contentHeight: ref(0),
+          scrollWidth: ref(0),
+          scrollHeight: ref(0),
+          curLeft: ref(0),
+          curTop: ref(0),
+          movableLeft: ref(0),
+          movableTop: ref(0)
+        };
+      const trackWidth2 = ref(0);
+      const trackHeight2 = ref(0);
+      const { width: scrollWidth2, height: scrollHeight2 } = useElementSize(
+        scrollRef,
+        void 0,
+        {
+          box: "border-box"
+        }
+      );
+      const curTop2 = ref(0);
+      const curLeft2 = ref(0);
+      const hasVerticalBar2 = computed(() => {
+        const style = scrollRef.value ? getComputedStyle(scrollRef.value) : { overflowY: "", overflow: "" };
+        const overflowY = style.overflowY;
+        const overflow = style.overflow;
+        const allowScroll = ["auto", "scroll"];
+        return contentHeight.value > scrollHeight2.value && (allowScroll.includes(overflowY) || allowScroll.includes(overflow));
+      });
+      const hashorizontalBar2 = computed(() => {
+        const style = scrollRef.value ? getComputedStyle(scrollRef.value) : { overflowX: "", overflow: "" };
+        const overflowX = style.overflowX;
+        const overflow = style.overflow;
+        const allowScroll = ["auto", "scroll"];
+        return contentWidth.value > scrollWidth2.value && (allowScroll.includes(overflowX) || allowScroll.includes(overflow));
+      });
+      const thumbHeight = computed(() => {
+        if (!hasVerticalBar2.value) return 0;
+        const height = +(scrollHeight2.value * scrollHeight2.value / contentHeight.value).toFixed(0);
+        return height <= 20 ? 20 : height;
+      });
+      const thumbWidth = computed(() => {
+        if (!hashorizontalBar2.value) return 0;
+        const width = +(scrollWidth2.value * scrollWidth2.value / contentWidth.value).toFixed(0);
+        return width <= 20 ? 20 : width;
+      });
+      const movableTop2 = computed(() => {
+        const track = hashorizontalBar2.value ? trackHeight2.value : 0;
+        return scrollHeight2.value - thumbHeight.value - track;
+      });
+      const movableLeft2 = computed(() => {
+        const track = hasVerticalBar2.value ? trackWidth2.value : 0;
+        return scrollWidth2.value - thumbWidth.value - track;
+      });
+      useContext().provide({
+        curLeft: curLeft2,
+        curTop: curTop2,
+        movableLeft: movableLeft2,
+        movableTop: movableTop2,
+        thumbHeight,
+        thumbWidth,
+        scrollRef,
+        isDragging: ref(false)
+      });
+      return {
+        hasVerticalBar: hasVerticalBar2,
+        hashorizontalBar: hashorizontalBar2,
+        trackWidth: trackWidth2,
+        trackHeight: trackHeight2,
+        contentHeight,
+        contentWidth,
+        scrollHeight: scrollHeight2,
+        scrollWidth: scrollWidth2,
+        movableLeft: movableLeft2,
+        movableTop: movableTop2,
+        curTop: curTop2,
+        curLeft: curLeft2
+      };
+    }
+    __expose({
+      scrollTo(options) {
+        var _a;
+        (_a = scrollRef.value) == null ? void 0 : _a.scrollTo(options);
+      },
+      scrollLeft(left) {
+        var _a;
+        (_a = scrollRef.value) == null ? void 0 : _a.scrollTo({
+          left
+        });
+      },
+      scrollTop(top) {
+        var _a;
+        (_a = scrollRef.value) == null ? void 0 : _a.scrollTo({
+          top
+        });
+      },
+      getScrollRef() {
+        return scrollRef.value;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-scrollbar",
+          _ctx.outerClass,
+          {
+            "yc-scrollbar-both-track": unref(type) == "track" && unref(hasVerticalBar) && unref(hashorizontalBar),
+            "yc-scrollbar-vertical-track": unref(type) == "track" && unref(hasVerticalBar),
+            "yc-scrollbar-horizontal-track": unref(type) == "track" && unref(hashorizontalBar),
+            "yc-scrollbar-real": !unref(scrollbar)
+          }
+        ]),
+        style: normalizeStyle(_ctx.outerStyle)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["yc-scrollbar-container", _ctx.$attrs.class]),
+          style: normalizeStyle(_ctx.$attrs.style),
+          ref_key: "scrollRef",
+          ref: scrollRef,
+          onScroll: handleScroll
+        }, [
+          createElementVNode("div", {
+            class: "yc-scrollbar-content",
+            ref_key: "contentRef",
+            ref: contentRef
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ], 512)
+        ], 38),
+        unref(hasVerticalBar) ? (openBlock(), createBlock(ScrollbarTrack, {
+          key: 0,
+          direction: "vertical",
+          onDrag: handleDrag,
+          onResize: _cache[0] || (_cache[0] = (val) => trackWidth.value = val)
+        })) : createCommentVNode("", true),
+        unref(hashorizontalBar) ? (openBlock(), createBlock(ScrollbarTrack, {
+          key: 1,
+          direction: "horizontal",
+          onDrag: handleDrag,
+          onResize: _cache[1] || (_cache[1] = (val) => trackHeight.value = val)
+        })) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Scrollbar/ScrollbarTrack.vue.d.ts

@@ -0,0 +1,17 @@
+import { Direction } from '../_shared/type';
+type __VLS_Props = {
+    direction?: Direction;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    drag: (isVertical: boolean, value: number) => any;
+    resize: (val: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrag?: ((isVertical: boolean, value: number) => any) | undefined;
+    onResize?: ((val: number) => any) | undefined;
+}>, {
+    direction: Direction;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    trackRef: HTMLDivElement;
+    dragRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/es/Scrollbar/ScrollbarTrack.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./ScrollbarTrack.vue2.js";
+/* empty css                    */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const ScrollbarTrack = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-153cb12b"]]);
+export {
+  ScrollbarTrack as default
+};