@king-one/antdv 1.0.16 → 1.0.18

package/dist/es/components/virtual-list/src/types.mjs

@@ -20,6 +20,7 @@ const virtualListProps = {
     type: String,
     default: "key"
   },
+  xScrollable: Boolean,
   onScroll: Function,
   onWheel: Function,
   onResize: Function

package/dist/es/components/virtual-list/src/types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","sources":["../../../../../components/virtual-list/src/types.ts"],"sourcesContent":["import type { VirtualListInst, VirtualListItemData } from 'vueuc'\nimport type { PropType } from 'vue'\n\nexport interface InterScrollParams {\n  viewportItems: any[]\n  scrollTop: number\n}\nexport const virtualListProps = {\n  items: {\n    type: Array as PropType<VirtualListItemData[]>,\n    default: () => []\n  },\n  itemSize: {\n    type: Number,\n    required: true\n  },\n  itemResizable: Boolean,\n  paddingTop: {\n    type: [Number, String] as PropType<number | string>,\n    default: 0\n  },\n  paddingBottom: {\n    type: [Number, String] as PropType<number | string>,\n    default: 0\n  },\n  keyField: {\n    type: String,\n    default: 'key'\n  },\n  onScroll: Function as PropType<(params: InterScrollParams) => void>,\n  onWheel: Function as PropType<(event: WheelEvent) => void>,\n  onResize: Function as PropType<(entry: ResizeObserverEntry) => void>\n} as const\nexport interface VirtualListRef extends VirtualListInst {\n  viewportItems: any[]\n  visibleItemsStyle: {\n    transform: string\n  }\n}\n"],"names":[],"mappings":"AAOO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,IAAA;AAAA,GACZ;AAAA,EACA,aAAe,EAAA,OAAA;AAAA,EACf,UAAY,EAAA;AAAA,IACV,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,CAAA;AAAA,GACX;AAAA,EACA,aAAe,EAAA;AAAA,IACb,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,CAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA,QAAA;AAAA,EACV,OAAS,EAAA,QAAA;AAAA,EACT,QAAU,EAAA,QAAA;AACZ;;;;"}
+{"version":3,"file":"types.mjs","sources":["../../../../../components/virtual-list/src/types.ts"],"sourcesContent":["import type { VirtualListInst, VirtualListItemData } from 'vueuc'\nimport type { PropType } from 'vue'\n\nexport interface InterScrollParams {\n  viewportItems: any[]\n  scrollTop: number\n}\nexport const virtualListProps = {\n  items: {\n    type: Array as PropType<VirtualListItemData[]>,\n    default: () => []\n  },\n  itemSize: {\n    type: Number,\n    required: true\n  },\n  itemResizable: Boolean,\n  paddingTop: {\n    type: [Number, String] as PropType<number | string>,\n    default: 0\n  },\n  paddingBottom: {\n    type: [Number, String] as PropType<number | string>,\n    default: 0\n  },\n  keyField: {\n    type: String,\n    default: 'key'\n  },\n  xScrollable: Boolean,\n  onScroll: Function as PropType<(params: InterScrollParams) => void>,\n  onWheel: Function as PropType<(event: WheelEvent) => void>,\n  onResize: Function as PropType<(entry: ResizeObserverEntry) => void>\n} as const\nexport interface VirtualListRef extends VirtualListInst {\n  viewportItems: any[]\n  visibleItemsStyle: {\n    transform: string\n  }\n}\n"],"names":[],"mappings":"AAOO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,IAAA;AAAA,GACZ;AAAA,EACA,aAAe,EAAA,OAAA;AAAA,EACf,UAAY,EAAA;AAAA,IACV,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,CAAA;AAAA,GACX;AAAA,EACA,aAAe,EAAA;AAAA,IACb,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,CAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA,EACA,WAAa,EAAA,OAAA;AAAA,EACb,QAAU,EAAA,QAAA;AAAA,EACV,OAAS,EAAA,QAAA;AAAA,EACT,QAAU,EAAA,QAAA;AACZ;;;;"}

package/dist/es/components/virtual-list/src/virtual-list.vue.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "key";
     };
+    readonly xScrollable: BooleanConstructor;
     readonly onScroll: import("vue").PropType<(params: import("./types").InterScrollParams) => void>;
     readonly onWheel: import("vue").PropType<(event: WheelEvent) => void>;
     readonly onResize: import("vue").PropType<(entry: ResizeObserverEntry) => void>;
@@ -31,6 +32,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly paddingTop: string | number;
         readonly paddingBottom: string | number;
         readonly keyField: string;
+        readonly xScrollable: boolean;
         readonly onScroll?: ((params: import("./types").InterScrollParams) => void) | undefined;
         readonly onWheel?: ((event: WheelEvent) => void) | undefined;
         readonly onResize?: ((entry: ResizeObserverEntry) => void) | undefined;
@@ -48,25 +50,34 @@ declare const _default: import("vue").DefineComponent<{
         readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly onScroll: import("vue").PropType<(e: Event) => void>;
+        readonly xScrollable: BooleanConstructor;
     }>>, {
         sync: () => void;
         handleContentResize: () => void;
         handleContainerResize: () => void;
         contentRef: import("vue").Ref<HTMLElement | null>;
         yRailRef: import("vue").Ref<HTMLElement | null>;
+        xRailRef: import("vue").Ref<HTMLElement | null>;
         containerRef: import("vue").Ref<HTMLElement | null>;
         contentHeightRef: import("vue").Ref<Nullable<number>>;
         containerHeightRef: import("vue").Ref<Nullable<number>>;
         needYBarRef: import("vue").ComputedRef<boolean>;
+        needXBarRef: import("vue").ComputedRef<boolean>;
         yBarSizePxRef: import("vue").ComputedRef<string>;
         handleYScrollMouseDown: (e: MouseEvent) => void;
+        handleXScrollMouseDown: (e: MouseEvent) => void;
         yBarTopPxRef: import("vue").ComputedRef<string>;
         handleScroll: (e: Event) => void;
+        xBarSizePxRef: import("vue").ComputedRef<string>;
+        xBarLeftPxRef: import("vue").ComputedRef<string>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly onScroll: import("vue").PropType<(e: Event) => void>;
-    }>>, {}, true, {}, {}, {
+        readonly xScrollable: BooleanConstructor;
+    }>>, {
+        readonly xScrollable: boolean;
+    }, true, {}, {}, {
         P: {};
         B: {};
         D: {};
@@ -77,21 +88,29 @@ declare const _default: import("vue").DefineComponent<{
         readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly onScroll: import("vue").PropType<(e: Event) => void>;
+        readonly xScrollable: BooleanConstructor;
     }>>, {
         sync: () => void;
         handleContentResize: () => void;
         handleContainerResize: () => void;
         contentRef: import("vue").Ref<HTMLElement | null>;
         yRailRef: import("vue").Ref<HTMLElement | null>;
+        xRailRef: import("vue").Ref<HTMLElement | null>;
         containerRef: import("vue").Ref<HTMLElement | null>;
         contentHeightRef: import("vue").Ref<Nullable<number>>;
         containerHeightRef: import("vue").Ref<Nullable<number>>;
         needYBarRef: import("vue").ComputedRef<boolean>;
+        needXBarRef: import("vue").ComputedRef<boolean>;
         yBarSizePxRef: import("vue").ComputedRef<string>;
         handleYScrollMouseDown: (e: MouseEvent) => void;
+        handleXScrollMouseDown: (e: MouseEvent) => void;
         yBarTopPxRef: import("vue").ComputedRef<string>;
         handleScroll: (e: Event) => void;
-    }, {}, {}, {}, {}> | null>;
+        xBarSizePxRef: import("vue").ComputedRef<string>;
+        xBarLeftPxRef: import("vue").ComputedRef<string>;
+    }, {}, {}, {}, {
+        readonly xScrollable: boolean;
+    }> | null>;
     getScrollContainer: () => HTMLElement | null | undefined;
     getScrollContent: () => HTMLElement | null | undefined;
     syncScrollbar: () => void | undefined;
@@ -226,25 +245,34 @@ declare const _default: import("vue").DefineComponent<{
         readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly onScroll: import("vue").PropType<(e: Event) => void>;
+        readonly xScrollable: BooleanConstructor;
     }, {
         sync: () => void;
         handleContentResize: () => void;
         handleContainerResize: () => void;
         contentRef: import("vue").Ref<HTMLElement | null>;
         yRailRef: import("vue").Ref<HTMLElement | null>;
+        xRailRef: import("vue").Ref<HTMLElement | null>;
         containerRef: import("vue").Ref<HTMLElement | null>;
         contentHeightRef: import("vue").Ref<Nullable<number>>;
         containerHeightRef: import("vue").Ref<Nullable<number>>;
         needYBarRef: import("vue").ComputedRef<boolean>;
+        needXBarRef: import("vue").ComputedRef<boolean>;
         yBarSizePxRef: import("vue").ComputedRef<string>;
         handleYScrollMouseDown: (e: MouseEvent) => void;
+        handleXScrollMouseDown: (e: MouseEvent) => void;
         yBarTopPxRef: import("vue").ComputedRef<string>;
         handleScroll: (e: Event) => void;
+        xBarSizePxRef: import("vue").ComputedRef<string>;
+        xBarLeftPxRef: import("vue").ComputedRef<string>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
         readonly onScroll: import("vue").PropType<(e: Event) => void>;
-    }>>, {}, {}>>;
+        readonly xScrollable: BooleanConstructor;
+    }>>, {
+        readonly xScrollable: boolean;
+    }, {}>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly items: {
         readonly type: import("vue").PropType<import("vueuc").VVirtualListItemData[]>;
@@ -267,6 +295,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "key";
     };
+    readonly xScrollable: BooleanConstructor;
     readonly onScroll: import("vue").PropType<(params: import("./types").InterScrollParams) => void>;
     readonly onWheel: import("vue").PropType<(event: WheelEvent) => void>;
     readonly onResize: import("vue").PropType<(entry: ResizeObserverEntry) => void>;
@@ -276,5 +305,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly paddingTop: string | number;
     readonly paddingBottom: string | number;
     readonly keyField: string;
+    readonly xScrollable: boolean;
 }, {}>;
 export default _default;

package/dist/es/components/virtual-list/src/virtual-list.vue2.mjs

@@ -40,46 +40,41 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       syncScrollbar();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(
-        unref(KScrollBar),
-        {
-          ref_key: "scrollbarInstRef",
-          ref: scrollbarInstRef,
-          style: { "max-height": "300px" },
-          container: getScrollContainer,
-          content: getScrollContent
-        },
-        {
-          default: withCtx(() => [
-            createVNode(unref(VVirtualList), {
-              ref_key: "virtualListInstRef",
-              ref: virtualListInstRef,
-              items: _ctx.items,
-              style: { "height": "100%" },
-              "item-size": _ctx.itemSize,
-              "item-resizable": _ctx.itemResizable,
-              "show-scrollbar": false,
-              "padding-bottom": _ctx.paddingBottom,
-              "padding-top": _ctx.paddingTop,
-              "on-scroll": handleScroll,
-              "on-resize": handleResize
-            }, {
-              default: withCtx(({ item, index }) => [
-                renderSlot(_ctx.$slots, "default", {
-                  item,
-                  index
-                })
-              ]),
-              _: 3
-              /* FORWARDED */
-            }, 8, ["items", "item-size", "item-resizable", "padding-bottom", "padding-top"])
-          ]),
-          _: 3
-          /* FORWARDED */
-        },
-        512
-        /* NEED_PATCH */
-      );
+      return openBlock(), createBlock(unref(KScrollBar), {
+        ref_key: "scrollbarInstRef",
+        ref: scrollbarInstRef,
+        style: { "max-height": "300px" },
+        "x-scrollable": _ctx.xScrollable,
+        container: getScrollContainer,
+        content: getScrollContent
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(VVirtualList), {
+            ref_key: "virtualListInstRef",
+            ref: virtualListInstRef,
+            items: _ctx.items,
+            style: { "height": "100%" },
+            "item-size": _ctx.itemSize,
+            "item-resizable": _ctx.itemResizable,
+            "show-scrollbar": false,
+            "padding-bottom": _ctx.paddingBottom,
+            "padding-top": _ctx.paddingTop,
+            "on-scroll": handleScroll,
+            "on-resize": handleResize
+          }, {
+            default: withCtx(({ item, index }) => [
+              renderSlot(_ctx.$slots, "default", {
+                item,
+                index
+              })
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["items", "item-size", "item-resizable", "padding-bottom", "padding-top"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["x-scrollable"]);
     };
   }
 });

package/dist/es/components/virtual-list/src/virtual-list.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-list.vue2.mjs","sources":["../../../../../components/virtual-list/src/virtual-list.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRaw } from 'vue'\nimport { VVirtualList } from 'vueuc'\nimport { debounce } from 'lodash-es'\nimport scrollbar from '../../scroll-bar'\nimport { type VirtualListRef, virtualListProps } from './types'\n\nconst props = defineProps(virtualListProps)\nconst virtualListInstRef = ref<VirtualListRef | null>(null)\nconst scrollbarInstRef = ref<InstanceType<typeof scrollbar> | null>(null)\nfunction getScrollContainer(): HTMLElement | null | undefined {\n  return virtualListInstRef.value?.listElRef\n}\nfunction getScrollContent(): HTMLElement | null | undefined {\n  return virtualListInstRef.value?.itemsElRef\n}\nconst syncScrollbar = () => scrollbarInstRef.value?.sync()\nconst debouncedLogViewportItems = debounce(() => {\n  if (virtualListInstRef.value) {\n    const scrollTop = virtualListInstRef.value.listElRef.scrollTop\n    const viewportItems = virtualListInstRef.value.viewportItems.map(item => toRaw(item))\n\n    props.onScroll?.({ viewportItems, scrollTop })\n  }\n}, 100)\nfunction handleScroll() {\n  debouncedLogViewportItems()\n  syncScrollbar()\n}\n\n// 使用防抖函数包裹 console.log\n\nfunction handleResize() {\n  syncScrollbar()\n}\n</script>\n\n<template>\n  <scrollbar ref=\"scrollbarInstRef\" style=\"max-height: 300px\" :container=\"getScrollContainer\" :content=\"getScrollContent\">\n    <VVirtualList\n      ref=\"virtualListInstRef\"\n      :items=\"items\"\n      style=\"height: 100%\"\n      :item-size=\"itemSize\"\n      :item-resizable=\"itemResizable\"\n      :show-scrollbar=\"false\"\n      :padding-bottom=\"paddingBottom\"\n      :padding-top=\"paddingTop\"\n      :on-scroll=\"handleScroll\"\n      :on-resize=\"handleResize\"\n    >\n      <template #default=\"{ item, index }\">\n        <slot :item=\"item\" :index=\"index\" />\n      </template>\n    </VVirtualList>\n  </scrollbar>\n</template>\n\n<style></style>\n"],"names":[],"mappings":";;;;;;;;;;;AAOA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,IAAM,MAAA,kBAAA,GAAqB,IAA2B,IAAI,CAAA,CAAA;AAC1D,IAAM,MAAA,gBAAA,GAAmB,IAA2C,IAAI,CAAA,CAAA;AACxE,IAAA,SAAS,kBAAqD,GAAA;;AAC5D,MAAO,OAAA,CAAA,EAAA,GAAA,kBAAA,CAAmB,UAAnB,IAA0B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAA,CAAA;AAAA,KACnC;AACA,IAAA,SAAS,gBAAmD,GAAA;;AAC1D,MAAO,OAAA,CAAA,EAAA,GAAA,kBAAA,CAAmB,UAAnB,IAA0B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,CAAA;AAAA,KACnC;AACA,IAAA,MAAM,gBAAgB,MAAG;;AAAG,MAAA,OAAA,CAAA,EAAA,GAAA,gBAAA,CAAiB,UAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,EAAA,CAAA;AAAA,KAAA,CAAA;AACpD,IAAM,MAAA,yBAAA,GAA4B,SAAS,MAAM;;AAC/C,MAAA,IAAI,mBAAmB,KAAO,EAAA;AAC5B,QAAM,MAAA,SAAA,GAAY,kBAAmB,CAAA,KAAA,CAAM,SAAU,CAAA,SAAA,CAAA;AACrD,QAAM,MAAA,aAAA,GAAgB,mBAAmB,KAAM,CAAA,aAAA,CAAc,IAAI,CAAQ,IAAA,KAAA,KAAA,CAAM,IAAI,CAAC,CAAA,CAAA;AAEpF,QAAA,CAAA,EAAA,GAAA,KAAA,CAAM,QAAN,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,KAAA,EAAiB,EAAE,aAAA,EAAe,SAAU,EAAA,CAAA,CAAA;AAAA,OAC9C;AAAA,OACC,GAAG,CAAA,CAAA;AACN,IAAA,SAAS,YAAe,GAAA;AACtB,MAA0B,yBAAA,EAAA,CAAA;AAC1B,MAAc,aAAA,EAAA,CAAA;AAAA,KAChB;AAIA,IAAA,SAAS,YAAe,GAAA;AACtB,MAAc,aAAA,EAAA,CAAA;AAAA,KAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"virtual-list.vue2.mjs","sources":["../../../../../components/virtual-list/src/virtual-list.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRaw } from 'vue'\nimport { VVirtualList } from 'vueuc'\nimport { debounce } from 'lodash-es'\nimport scrollbar from '../../scroll-bar'\nimport { type VirtualListRef, virtualListProps } from './types'\n\nconst props = defineProps(virtualListProps)\nconst virtualListInstRef = ref<VirtualListRef | null>(null)\nconst scrollbarInstRef = ref<InstanceType<typeof scrollbar> | null>(null)\nfunction getScrollContainer(): HTMLElement | null | undefined {\n  return virtualListInstRef.value?.listElRef\n}\nfunction getScrollContent(): HTMLElement | null | undefined {\n  return virtualListInstRef.value?.itemsElRef\n}\nconst syncScrollbar = () => scrollbarInstRef.value?.sync()\nconst debouncedLogViewportItems = debounce(() => {\n  if (virtualListInstRef.value) {\n    const scrollTop = virtualListInstRef.value.listElRef.scrollTop\n    const viewportItems = virtualListInstRef.value.viewportItems.map(item => toRaw(item))\n\n    props.onScroll?.({ viewportItems, scrollTop })\n  }\n}, 100)\nfunction handleScroll() {\n  debouncedLogViewportItems()\n  syncScrollbar()\n}\n\n// 使用防抖函数包裹 console.log\n\nfunction handleResize() {\n  syncScrollbar()\n}\n</script>\n\n<template>\n  <scrollbar ref=\"scrollbarInstRef\" style=\"max-height: 300px\" :x-scrollable=\"xScrollable\" :container=\"getScrollContainer\" :content=\"getScrollContent\">\n    <VVirtualList\n      ref=\"virtualListInstRef\"\n      :items=\"items\"\n      style=\"height: 100%\"\n      :item-size=\"itemSize\"\n      :item-resizable=\"itemResizable\"\n      :show-scrollbar=\"false\"\n      :padding-bottom=\"paddingBottom\"\n      :padding-top=\"paddingTop\"\n      :on-scroll=\"handleScroll\"\n      :on-resize=\"handleResize\"\n    >\n      <template #default=\"{ item, index }\">\n        <slot :item=\"item\" :index=\"index\" />\n      </template>\n    </VVirtualList>\n  </scrollbar>\n</template>\n\n<style></style>\n"],"names":[],"mappings":";;;;;;;;;;;AAOA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,IAAM,MAAA,kBAAA,GAAqB,IAA2B,IAAI,CAAA,CAAA;AAC1D,IAAM,MAAA,gBAAA,GAAmB,IAA2C,IAAI,CAAA,CAAA;AACxE,IAAA,SAAS,kBAAqD,GAAA;;AAC5D,MAAO,OAAA,CAAA,EAAA,GAAA,kBAAA,CAAmB,UAAnB,IAA0B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAA,CAAA;AAAA,KACnC;AACA,IAAA,SAAS,gBAAmD,GAAA;;AAC1D,MAAO,OAAA,CAAA,EAAA,GAAA,kBAAA,CAAmB,UAAnB,IAA0B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,CAAA;AAAA,KACnC;AACA,IAAA,MAAM,gBAAgB,MAAG;;AAAG,MAAA,OAAA,CAAA,EAAA,GAAA,gBAAA,CAAiB,UAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,EAAA,CAAA;AAAA,KAAA,CAAA;AACpD,IAAM,MAAA,yBAAA,GAA4B,SAAS,MAAM;;AAC/C,MAAA,IAAI,mBAAmB,KAAO,EAAA;AAC5B,QAAM,MAAA,SAAA,GAAY,kBAAmB,CAAA,KAAA,CAAM,SAAU,CAAA,SAAA,CAAA;AACrD,QAAM,MAAA,aAAA,GAAgB,mBAAmB,KAAM,CAAA,aAAA,CAAc,IAAI,CAAQ,IAAA,KAAA,KAAA,CAAM,IAAI,CAAC,CAAA,CAAA;AAEpF,QAAA,CAAA,EAAA,GAAA,KAAA,CAAM,QAAN,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,KAAA,EAAiB,EAAE,aAAA,EAAe,SAAU,EAAA,CAAA,CAAA;AAAA,OAC9C;AAAA,OACC,GAAG,CAAA,CAAA;AACN,IAAA,SAAS,YAAe,GAAA;AACtB,MAA0B,yBAAA,EAAA,CAAA;AAC1B,MAAc,aAAA,EAAA,CAAA;AAAA,KAChB;AAIA,IAAA,SAAS,YAAe,GAAA;AACtB,MAAc,aAAA,EAAA,CAAA;AAAA,KAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/components/scroll-bar/index.d.ts

@@ -4,23 +4,32 @@ export declare const KScrollBar: import("../utils/install").SFCWithInstall<impor
     readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
     readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
     readonly onScroll: import("vue").PropType<(e: Event) => void>;
+    readonly xScrollable: BooleanConstructor;
 }, {
     sync: () => void;
     handleContentResize: () => void;
     handleContainerResize: () => void;
     contentRef: import("vue").Ref<HTMLElement | null>;
     yRailRef: import("vue").Ref<HTMLElement | null>;
+    xRailRef: import("vue").Ref<HTMLElement | null>;
     containerRef: import("vue").Ref<HTMLElement | null>;
     contentHeightRef: import("vue").Ref<Nullable<number>>;
     containerHeightRef: import("vue").Ref<Nullable<number>>;
     needYBarRef: import("vue").ComputedRef<boolean>;
+    needXBarRef: import("vue").ComputedRef<boolean>;
     yBarSizePxRef: import("vue").ComputedRef<string>;
     handleYScrollMouseDown: (e: MouseEvent) => void;
+    handleXScrollMouseDown: (e: MouseEvent) => void;
     yBarTopPxRef: import("vue").ComputedRef<string>;
     handleScroll: (e: Event) => void;
+    xBarSizePxRef: import("vue").ComputedRef<string>;
+    xBarLeftPxRef: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
     readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
     readonly onScroll: import("vue").PropType<(e: Event) => void>;
-}>>, {}, {}>>;
+    readonly xScrollable: BooleanConstructor;
+}>>, {
+    readonly xScrollable: boolean;
+}, {}>>;
 export default KScrollBar;

package/dist/lib/components/scroll-bar/src/scroll-bar.d.ts

@@ -2,23 +2,32 @@ declare const _default: import("vue").DefineComponent<{
     readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
     readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
     readonly onScroll: import("vue").PropType<(e: Event) => void>;
+    readonly xScrollable: BooleanConstructor;
 }, {
     sync: () => void;
     handleContentResize: () => void;
     handleContainerResize: () => void;
     contentRef: import("vue").Ref<HTMLElement | null>;
     yRailRef: import("vue").Ref<HTMLElement | null>;
+    xRailRef: import("vue").Ref<HTMLElement | null>;
     containerRef: import("vue").Ref<HTMLElement | null>;
     contentHeightRef: import("vue").Ref<Nullable<number>>;
     containerHeightRef: import("vue").Ref<Nullable<number>>;
     needYBarRef: import("vue").ComputedRef<boolean>;
+    needXBarRef: import("vue").ComputedRef<boolean>;
     yBarSizePxRef: import("vue").ComputedRef<string>;
     handleYScrollMouseDown: (e: MouseEvent) => void;
+    handleXScrollMouseDown: (e: MouseEvent) => void;
     yBarTopPxRef: import("vue").ComputedRef<string>;
     handleScroll: (e: Event) => void;
+    xBarSizePxRef: import("vue").ComputedRef<string>;
+    xBarLeftPxRef: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly container: import("vue").PropType<() => HTMLElement | null | undefined>;
     readonly content: import("vue").PropType<() => HTMLElement | null | undefined>;
     readonly onScroll: import("vue").PropType<(e: Event) => void>;
-}>>, {}, {}>;
+    readonly xScrollable: BooleanConstructor;
+}>>, {
+    readonly xScrollable: boolean;
+}, {}>;
 export default _default;

package/dist/lib/components/scroll-bar/src/scroll-bar.js

@@ -29,11 +29,13 @@ var ScrollBar = /* @__PURE__ */ vue.defineComponent({
     const contentRef = vue.ref(null);
     const containerRef = vue.ref(null);
     const yRailRef = vue.ref(null);
+    const xRailRef = vue.ref(null);
     const contentHeightRef = vue.ref(null);
     const contentWidthRef = vue.ref(null);
     const containerHeightRef = vue.ref(null);
     const containerWidthRef = vue.ref(null);
     const yRailSizeRef = vue.ref(null);
+    const xRailSizeRef = vue.ref(null);
     const mergedContentRef = vue.computed(() => {
       var _a;
       return ((_a = props.content) == null ? void 0 : _a.call(props)) || contentRef.value;
@@ -43,6 +45,16 @@ var ScrollBar = /* @__PURE__ */ vue.defineComponent({
       return ((_a = props.container) == null ? void 0 : _a.call(props)) || containerRef.value;
     });
     const containerScrollTopRef = vue.ref(0);
+    const containerScrollLeftRef = vue.ref(0);
+    const needYBarRef = vue.computed(() => {
+      const {
+        value: containerHeight
+      } = containerHeightRef;
+      const {
+        value: contentHeight
+      } = contentHeightRef;
+      return containerHeight !== null && contentHeight !== null && contentHeight > containerHeight;
+    });
     const yBarSizeRef = vue.computed(() => {
       const {
         value: containerHeight
@@ -59,6 +71,9 @@ var ScrollBar = /* @__PURE__ */ vue.defineComponent({
         return Math.min(containerHeight, yRailSize * containerHeight / contentHeight + 5 * 1.5);
       }
     });
+    const yBarSizePxRef = vue.computed(() => {
+      return `${yBarSizeRef.value}px`;
+    });
     const yBarTopRef = vue.computed(() => {
       const {
         value: containerHeight
@@ -83,46 +98,16 @@ var ScrollBar = /* @__PURE__ */ vue.defineComponent({
     const yBarTopPxRef = vue.computed(() => {
       return `${yBarTopRef.value}px`;
     });
-    const needYBarRef = vue.computed(() => {
-      const {
-        value: containerHeight
-      } = containerHeightRef;
-      const {
-        value: contentHeight
-      } = contentHeightRef;
-      return containerHeight !== null && contentHeight !== null && contentHeight > containerHeight;
-    });
-    const yBarSizePxRef = vue.computed(() => {
-      return `${yBarSizeRef.value}px`;
-    });
-    const syncPositionState = () => {
-      const {
-        value: content
-      } = mergedContentRef;
-      if (content) {
-        contentHeightRef.value = content.offsetHeight;
-        contentWidthRef.value = content.offsetWidth;
-      }
-      const {
-        value: container
-      } = mergedContainerRef;
-      if (container) {
-        containerHeightRef.value = container.offsetHeight;
-        containerWidthRef.value = container.offsetWidth;
-      }
-      const {
-        value: yRailEl
-      } = yRailRef;
-      if (yRailEl) {
-        yRailSizeRef.value = yRailEl.offsetHeight;
-      }
-    };
     let yBarPressed = false;
     let memoYTop = 0;
     let memoMouseY = 0;
     let yBarVanishTimerId;
+    let xBarVanishTimerId;
     const handleYScrollMouseMove = (e) => {
       if (!yBarPressed) return;
+      if (xBarVanishTimerId !== void 0) {
+        window.clearTimeout(xBarVanishTimerId);
+      }
       if (yBarVanishTimerId !== void 0) {
         window.clearTimeout(yBarVanishTimerId);
       }
@@ -173,14 +158,146 @@ var ScrollBar = /* @__PURE__ */ vue.defineComponent({
       if (onScroll) onScroll(e);
       syncScrollState();
     }
+    const needXBarRef = vue.computed(() => {
+      const {
+        value: containerWidth
+      } = containerWidthRef;
+      const {
+        value: contentWidth
+      } = contentWidthRef;
+      return containerWidth !== null && contentWidth !== null && contentWidth > containerWidth;
+    });
+    const xBarSizeRef = vue.computed(() => {
+      const {
+        value: containerWidth
+      } = containerWidthRef;
+      const {
+        value: contentWidth
+      } = contentWidthRef;
+      const {
+        value: xRailSize
+      } = xRailSizeRef;
+      if (containerWidth === null || contentWidth === null || xRailSize === null) {
+        return 0;
+      } else {
+        return xRailSize * containerWidth / contentWidth + 5 * 1.5;
+      }
+    });
+    const xBarSizePxRef = vue.computed(() => {
+      return `${xBarSizeRef.value}px`;
+    });
+    const xBarLeftRef = vue.computed(() => {
+      const {
+        value: containerWidth
+      } = containerWidthRef;
+      const {
+        value: containerScrollLeft
+      } = containerScrollLeftRef;
+      const {
+        value: contentWidth
+      } = contentWidthRef;
+      const {
+        value: xRailSize
+      } = xRailSizeRef;
+      if (containerWidth === null || contentWidth === null || xRailSize === null) {
+        return 0;
+      } else {
+        const widthDiff = contentWidth - containerWidth;
+        if (!widthDiff) return 0;
+        return containerScrollLeft / widthDiff * (xRailSize - xBarSizeRef.value);
+      }
+    });
+    const xBarLeftPxRef = vue.computed(() => {
+      return `${xBarLeftRef.value}px`;
+    });
+    let xBarPressed = false;
+    let memoXLeft = 0;
+    let memoMouseX = 0;
+    const handleXScrollMouseMove = (e) => {
+      if (!xBarPressed) return;
+      if (xBarVanishTimerId !== void 0) {
+        window.clearTimeout(xBarVanishTimerId);
+      }
+      if (yBarVanishTimerId !== void 0) {
+        window.clearTimeout(yBarVanishTimerId);
+      }
+      const {
+        value: containerWidth
+      } = containerWidthRef;
+      const {
+        value: contentWidth
+      } = contentWidthRef;
+      const {
+        value: xBarSize
+      } = xBarSizeRef;
+      if (containerWidth === null || contentWidth === null) return;
+      const dX = e.clientX - memoMouseX;
+      const dScrollLeft = dX * (contentWidth - containerWidth) / (containerWidth - xBarSize);
+      const toScrollLeftUpperBound = contentWidth - containerWidth;
+      let toScrollLeft = memoXLeft + dScrollLeft;
+      toScrollLeft = Math.min(toScrollLeftUpperBound, toScrollLeft);
+      toScrollLeft = Math.max(toScrollLeft, 0);
+      const {
+        value: container
+      } = mergedContainerRef;
+      if (container) {
+        container.scrollLeft = toScrollLeft;
+      }
+    };
+    const handleXScrollMouseUp = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      evtd.off("mousemove", window, handleXScrollMouseMove, true);
+      evtd.off("mouseup", window, handleXScrollMouseUp, true);
+      xBarPressed = false;
+      sync();
+    };
+    function handleXScrollMouseDown(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      xBarPressed = true;
+      evtd.on("mousemove", window, handleXScrollMouseMove, true);
+      evtd.on("mouseup", window, handleXScrollMouseUp, true);
+      memoXLeft = containerScrollLeftRef.value;
+      memoMouseX = e.clientX;
+    }
     function syncScrollState() {
       const {
         value: container
       } = mergedContainerRef;
       if (container) {
         containerScrollTopRef.value = container.scrollTop;
+        containerScrollLeftRef.value = container.scrollLeft;
       }
     }
+    const syncPositionState = () => {
+      const {
+        value: content
+      } = mergedContentRef;
+      if (content) {
+        contentHeightRef.value = content.offsetHeight;
+        contentWidthRef.value = content.offsetWidth;
+      }
+      const {
+        value: container
+      } = mergedContainerRef;
+      if (container) {
+        containerHeightRef.value = container.offsetHeight;
+        containerWidthRef.value = container.offsetWidth;
+      }
+      const {
+        value: yRailEl
+      } = yRailRef;
+      if (yRailEl) {
+        yRailSizeRef.value = yRailEl.offsetHeight;
+      }
+      const {
+        value: xRailEl
+      } = xRailRef;
+      if (xRailEl) {
+        xRailSizeRef.value = xRailEl.offsetWidth;
+      }
+    };
     function sync() {
       syncPositionState();
       syncScrollState();
@@ -191,27 +308,46 @@ var ScrollBar = /* @__PURE__ */ vue.defineComponent({
       handleContainerResize,
       contentRef,
       yRailRef,
+      xRailRef,
       containerRef,
       contentHeightRef,
       containerHeightRef,
       needYBarRef,
+      needXBarRef,
       yBarSizePxRef,
       handleYScrollMouseDown,
+      handleXScrollMouseDown,
       yBarTopPxRef,
-      handleScroll
+      handleScroll,
+      xBarSizePxRef,
+      xBarLeftPxRef
     };
   },
   render() {
     let _slot;
     const {
-      $slots
+      $slots,
+      xScrollable
     } = this;
+    const createXBar = () => {
+      return vue.createVNode("div", {
+        "class": `${index.defaultNamespace}-scrollbar-rail ${index.defaultNamespace}-scrollbar-rail--horizontal`,
+        "ref": "xRailRef"
+      }, [this.needXBarRef && vue.createVNode("div", {
+        "class": `${index.defaultNamespace}-scrollbar-rail__scrollbar--horizontal`,
+        "style": {
+          width: this.xBarSizePxRef,
+          left: this.xBarLeftPxRef
+        },
+        "onMousedown": this.handleXScrollMouseDown
+      }, null)]);
+    };
     const createYBar = () => {
       return vue.createVNode("div", {
-        "class": `${index.defaultNamespace}-scrollbar-rail`,
+        "class": `${index.defaultNamespace}-scrollbar-rail ${index.defaultNamespace}-scrollbar-rail--vertical`,
         "ref": "yRailRef"
       }, [this.needYBarRef && vue.createVNode("div", {
-        "class": `${index.defaultNamespace}-scrollbar-rail__scrollbar`,
+        "class": `${index.defaultNamespace}-scrollbar-rail__scrollbar--vertical`,
         "style": {
           height: this.yBarSizePxRef,
           top: this.yBarTopPxRef
@@ -237,7 +373,7 @@ var ScrollBar = /* @__PURE__ */ vue.defineComponent({
             "class": `${index.defaultNamespace}-scrollbar-content`
           }, [(_a2 = $slots.default) == null ? void 0 : _a2.call($slots)])];
         }
-      })]), createYBar()]);
+      })]), createYBar(), xScrollable && createXBar()]);
     };
     const createBarNode = this.container ? createChildren() : vue.createVNode(vueuc.VResizeObserver, {
       "onResize": this.handleContainerResize