@aplus-frontend/ui 0.4.3 → 0.4.4

package/lib/src/path-map.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={ApActionItem:["ap-action","item"],ApActionItemModal:["ap-action","item-modal"],ApActionItemPopconfirm:["ap-action","item-popconfirm"],ApActionItemDropdown:["ap-action","item-dropdown"],ApActionGroup:["ap-action","group"],ApButton:["ap-button"],ApActionButton:["ap-action-button"],ApDescriptions:["ap-descriptions"],ApDownload:["ap-download"],ApField:["ap-field"],ApFieldText:["ap-field","text"],ApFieldCheckbox:["ap-field","checkbox"],ApFieldDate:["ap-field","date"],ApFieldNumber:["ap-field","number"],ApFieldRadio:["ap-field","radio"],ApFieldSwitch:["ap-field","switch"],ApFieldTextArea:["ap-field","text-area"],ApFieldDateRange:["ap-field","date-range"],ApFieldSelect:["ap-field","select"],ApFieldPassword:["ap-field","password"],ApFieldSlider:["ap-field","slider"],ApFieldSegmented:["ap-field","segmented"],ApFieldDateRate:["ap-field","rate"],ApForm:["ap-form"],ApFormItem:["ap-form","item"],ApFormItemGroup:["ap-form","item-group"],ApFormList:["ap-form","list"],ApFormSearchForm:["ap-form","search-form"],ApFormModalForm:["ap-form","modal-form"],ApFormDependency:["ap-form","dependency"],ApFormSet:["ap-form","set"],ApFormDrawerForm:["ap-form","drawer-form"],ApFormItemText:["ap-form","item-text"],ApFormItemTextArea:["ap-form","item-text-area"],ApFormItemNumber:["ap-form","item-number"],ApFormItemDate:["ap-form","item-date"],ApFormItemDateRange:["ap-form","item-date-range"],ApFormItemRadio:["ap-form","item-radio"],ApFormItemSelect:["ap-form","item-select"],ApFormItemSwitch:["ap-form","item-switch"],ApFormItemCheckbox:["ap-form","item-checkbox"],ApFormItemTextPassword:["ap-form","item-text-password"],ApFormItemTextGroup:["ap-form","item-text-group"],ApInfoLayout:["ap-info-layout"],ApList:["ap-list"],ApModal:["ap-modal"],ApDrawer:["ap-drawer"],ApTable:["ap-table"],ApTag:["ap-tag"],ApTagGroup:["ap-tag","group"],ApUpload:["ap-upload"],CheckCard:["check-card"],CheckCardGroup:["check-card","group"],ConfigProvider:["config-provider"],EditableTable:["editable-table"],EditableTableFormItem:["editable-table","form-item"],WorkOrderModal:["work-order-modal"],ApAttachment:["business","ap-attachment"],ApBatchAction:["business","ap-batch-action"],ApBatchActionGroup:["business","ap-batch-action-group"],ApButtonGroup:["business","ap-button-group"],ApCard:["business","ap-card"],ApExpandAlert:["business","ap-expand-alert"],ApExportGroup:["business","ap-export-group"],ApImage:["business","ap-image"],ApInputRadio:["business","ap-input-radio"],ApSizeInput:["business","ap-size-input"],ApLabel:["business","ap-label"],ApLabelGroup:["business","ap-label","group"],ApLadder:["business","ap-ladder"],ApSelectLayout:["business","ap-select-layout"],ApStatus:["business","ap-status"],ApStatusGroup:["business","ap-status","group"],ApTableModal:["business","ap-table-modal"],useTableModal:["business","ap-table-modal"],useTableSelectModal:["business","ap-table-modal"],ApTitle:["business","ap-title"],ApSummary:["business","ap-summary"],ApScrollBar:["ap-scroll-bar"],ApAppendix:["business","ap-appendix"],ApGroupSearch:["business","ap-group-search"],ApPopoverSelect:["business","ap-group-search","popover-select"],ApExtensionSelect:["business","ap-group-search","extension-select"],ApUploadSingle:["business","ap-upload-file","ap-upload-single"],BatchInputGroup:["business","batch-input-group"],ApFormControlRender:["ap-form","render"],ApFormItemRender:["ap-form","render"]};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={ApActionItem:["ap-action","item"],ApActionItemModal:["ap-action","item-modal"],ApActionItemPopconfirm:["ap-action","item-popconfirm"],ApActionItemDropdown:["ap-action","item-dropdown"],ApActionGroup:["ap-action","group"],ApButton:["ap-button"],ApActionButton:["ap-action-button"],ApDescriptions:["ap-descriptions"],ApDownload:["ap-download"],ApField:["ap-field"],ApFieldText:["ap-field","text"],ApFieldCheckbox:["ap-field","checkbox"],ApFieldDate:["ap-field","date"],ApFieldNumber:["ap-field","number"],ApFieldRadio:["ap-field","radio"],ApFieldSwitch:["ap-field","switch"],ApFieldTextArea:["ap-field","text-area"],ApFieldDateRange:["ap-field","date-range"],ApFieldSelect:["ap-field","select"],ApFieldPassword:["ap-field","password"],ApFieldSlider:["ap-field","slider"],ApFieldSegmented:["ap-field","segmented"],ApFieldDateRate:["ap-field","rate"],ApForm:["ap-form"],ApFormItem:["ap-form","item"],ApFormItemGroup:["ap-form","item-group"],ApFormList:["ap-form","list"],ApFormSearchForm:["ap-form","search-form"],ApFormModalForm:["ap-form","modal-form"],ApFormDependency:["ap-form","dependency"],ApFormSet:["ap-form","set"],ApFormDrawerForm:["ap-form","drawer-form"],ApFormItemText:["ap-form","item-text"],ApFormItemTextArea:["ap-form","item-text-area"],ApFormItemNumber:["ap-form","item-number"],ApFormItemDate:["ap-form","item-date"],ApFormItemDateRange:["ap-form","item-date-range"],ApFormItemRadio:["ap-form","item-radio"],ApFormItemSelect:["ap-form","item-select"],ApFormItemSwitch:["ap-form","item-switch"],ApFormItemCheckbox:["ap-form","item-checkbox"],ApFormItemTextPassword:["ap-form","item-text-password"],ApFormItemTextGroup:["ap-form","item-text-group"],ApInfoLayout:["ap-info-layout"],ApList:["ap-list"],ApModal:["ap-modal"],ApDrawer:["ap-drawer"],ApTable:["ap-table"],ApTag:["ap-tag"],ApTagGroup:["ap-tag","group"],ApUpload:["ap-upload"],CheckCard:["check-card"],CheckCardGroup:["check-card","group"],ConfigProvider:["config-provider"],EditableTable:["editable-table"],EditableTableFormItem:["editable-table","form-item"],WorkOrderModal:["work-order-modal"],ApAttachment:["business","ap-attachment"],ApBatchAction:["business","ap-batch-action"],ApBatchActionGroup:["business","ap-batch-action-group"],ApButtonGroup:["business","ap-button-group"],ApCard:["business","ap-card"],ApExpandAlert:["business","ap-expand-alert"],ApExportGroup:["business","ap-export-group"],ApImage:["business","ap-image"],ApInputRadio:["business","ap-input-radio"],ApSizeInput:["business","ap-size-input"],ApLabel:["business","ap-label"],ApLabelGroup:["business","ap-label","group"],ApLadder:["business","ap-ladder"],ApSelectLayout:["business","ap-select-layout"],ApStatus:["business","ap-status"],ApStatusGroup:["business","ap-status","group"],ApTableModal:["business","ap-table-modal"],useTableModal:["business","ap-table-modal"],useTableSelectModal:["business","ap-table-modal"],ApTitle:["business","ap-title"],ApSummary:["business","ap-summary"],ScrollBar:["scroll-bar"],ApAppendix:["business","ap-appendix"],ApGroupSearch:["business","ap-group-search"],ApPopoverSelect:["business","ap-group-search","popover-select"],ApExtensionSelect:["business","ap-group-search","extension-select"],ApUploadSingle:["business","ap-upload-file","ap-upload-single"],BatchInputGroup:["business","batch-input-group"],ApFormControlRender:["ap-form","render"],ApFormItemRender:["ap-form","render"]};exports.default=e;

package/lib/src/scroll-bar/hooks/use-track.d.ts

@@ -0,0 +1,30 @@
+import { Ref } from 'vue';
+/**
+ * 处理点击滑轨滚动
+ * @param param0
+ * @returns
+ */
+export declare function useTrack({ currentScroll, trackSpeed, track, bar, tracking, type, barLength, disabled, onDown, onMove, onUp, onScroll }: {
+    currentScroll: Ref<number>;
+    type: Ref<'vertical' | 'horizontal'>;
+    trackSpeed?: Ref<number>;
+    track?: Ref<HTMLElement | null | undefined>;
+    bar?: Ref<HTMLElement | null | undefined>;
+    tracking?: Ref<boolean>;
+    barLength?: Ref<number>;
+    disabled?: Ref<boolean>;
+    onDown?: (scroll: number) => void;
+    onMove?: (scroll: number) => void;
+    onUp?: (scroll: number) => void;
+    onScroll?: (scroll: number) => void;
+}): {
+    currentScroll: Ref<number, number>;
+    trackSpeed: Ref<number, number>;
+    track: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
+    bar: Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
+    tracking: Ref<boolean, boolean>;
+    type: Ref<"horizontal" | "vertical", "horizontal" | "vertical">;
+    barLength: Ref<number, number>;
+    disabled: Ref<boolean, boolean>;
+    handleMouseDown: (event: PointerEvent) => false | undefined;
+};

package/lib/src/scroll-bar/hooks/use-track.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),q=require("../utils/index.js"),M=()=>{};function V({currentScroll:e=i.ref(0),trackSpeed:v=i.ref(2),track:p=i.ref(null),bar:n=i.ref(null),tracking:d=i.ref(!1),type:R=i.ref("vertical"),barLength:o=i.ref(35),disabled:x=i.ref(!1),onDown:w=M,onMove:A=M,onUp:B=M,onScroll:P=M}){let r,s,f,l,m=!0,g=!1;function h(){if(!d.value)return;g=!0;const t=X(l,e.value);let a=!1;if(m){if(e.value<l){const u=e.value+t*v.value;e.value=Math.min(u,l),a=!0}}else if(e.value>l){const u=e.value-t*v.value;e.value=Math.max(u,l),a=!0}a&&P(e.value),(d.value&&m?e.value<l:e.value>l)?requestAnimationFrame(h):g=!1}function T(t){if(x.value||t.button!==0||(t.stopPropagation(),t.preventDefault(),!p.value||!n.value))return!1;document.addEventListener("pointermove",D),document.addEventListener("pointerup",E);const a=p.value.getBoundingClientRect(),u=n.value.getBoundingClientRect();let c;R.value==="vertical"?(r=a.height,s=u.top-a.top,f=u.top,c=s+t.clientY-f):(r=a.width,s=u.left-a.left,f=u.left,c=s+t.clientX-f),m=c/r*100>o.value;const C=(c/r*100-(m?o.value:0))/(100-o.value);l=q.ensureRangeValue(C*100),d.value=!0,w(e.value),h()}function D(t){t.stopPropagation(),t.preventDefault(),A(e.value);let a;R.value==="vertical"?a=s+t.clientY-f:a=s+t.clientX-f;const u=(a/r*100-(m?o.value:0))/(100-o.value);l=q.ensureRangeValue(u*100),!g&&h()}function E(t){t.preventDefault(),document.removeEventListener("pointermove",D),document.removeEventListener("pointerup",E),d.value=!1,B(e.value)}return{currentScroll:e,trackSpeed:v,track:p,bar:n,tracking:d,type:R,barLength:o,disabled:x,handleMouseDown:T}}function X(e,v){const p=Math.abs(e-v);for(let n=0;n<5;++n)if(p<(n+1)*20)return 1+.25*n;return 2}exports.useTrack=V;

package/lib/src/scroll-bar/index.d.ts

@@ -0,0 +1,4 @@
+import { default as ScrollBar } from './index.vue';
+import { default as InternalScrollBar } from './internal.vue';
+export { ScrollBar, InternalScrollBar };
+export * from './interface';

package/lib/src/scroll-bar/index.js

@@ -0,0 +1 @@
+"use strict";require("./index.vue2.js");require("./internal.vue2.js");require("./interface.js");

package/lib/src/scroll-bar/index.vue.d.ts

@@ -0,0 +1,52 @@
+import { ScrollBarProps, ScrollBarDirection, InternalScrollBarProps } from './interface';
+import { DefineComponent, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, CreateComponentPublicInstanceWithMixins, Ref, GlobalComponents, GlobalDirectives } from 'vue';
+declare const _default: DefineComponent<ScrollBarProps, {
+    currentScroll: ComputedRef<number | undefined>;
+    scroll: ((percent: number) => void) | undefined;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ScrollBarProps> & Readonly<{}>, {
+    disabled: boolean;
+    direction: ScrollBarDirection;
+    showTrack: boolean;
+    trackSpeed: number;
+    extraSize: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    barRef: CreateComponentPublicInstanceWithMixins<Readonly< InternalScrollBarProps> & Readonly<{}>, {
+        currentScroll: Ref<number, number>;
+        container: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        bar: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        track: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        scroll: (percent: number) => void;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+        scroll: number;
+        disabled: boolean;
+        direction: ScrollBarDirection;
+        barLength: number;
+        showTrack: boolean;
+        trackSpeed: number;
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+        container: HTMLDivElement;
+        track: HTMLDivElement;
+        bar: HTMLDivElement;
+    }, HTMLDivElement, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly< InternalScrollBarProps> & Readonly<{}>, {
+        currentScroll: Ref<number, number>;
+        container: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        bar: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        track: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        scroll: (percent: number) => void;
+    }, {}, {}, {}, {
+        scroll: number;
+        disabled: boolean;
+        direction: ScrollBarDirection;
+        barLength: number;
+        showTrack: boolean;
+        trackSpeed: number;
+    }> | null;
+}, HTMLDivElement>;
+export default _default;

package/lib/src/scroll-bar/index.vue.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("./internal.vue2.js");const b=require("lodash-unified"),i=require("./utils/index.js"),h=require("./internal.vue.js"),g=e.defineComponent({name:"ScrollBar",__name:"index",props:{scrollContainer:{},extraSize:{default:0},direction:{default:"vertical"},scroll:{},width:{},barColor:{},trackColor:{},trackWidth:{},disabled:{type:Boolean,default:!1},showTrack:{type:Boolean,default:!0},trackSpeed:{default:2},onScrollStart:{},onScroll:{},onScrollEnd:{}},setup(f,{expose:d}){var s;const t=f,a=e.toRef(t,"scrollContainer"),n=e.ref(),u=e.ref(30);function S(){if(!a.value||!n.value)return;const{totalSize:r,visibleSize:l,distance:o}=i.getScrollable(a.value,t.direction),c=o/(r+t.extraSize-l||1)*100;n.value.scroll(c)}e.watchEffect(()=>{const r=e.unref(a.value);if(!r)return;const{visibleSize:l,totalSize:o}=i.getScrollable(r,t.direction);u.value=i.ensureRangeValue(Math.min(l/(o+t.extraSize||1)*100)),r.addEventListener("scroll",S)},{flush:"post"});function p(r){const l=e.unref(a);if(!l)return;const{totalSize:o,visibleSize:c,topOrLeft:v}=i.getScrollable(l,t.direction);if(o<=c)return;const _=`scroll${v}`;l[_]=r*(o+t.extraSize-c)/100}return d({currentScroll:e.computed(()=>{var r;return e.unref((r=n.value)==null?void 0:r.currentScroll)}),scroll:(s=n.value)==null?void 0:s.scroll}),(r,l)=>(e.openBlock(),e.createBlock(h.default,e.mergeProps({ref_key:"barRef",ref:n,"bar-length":u.value},e.unref(b.omit)(t,["onScroll","extraSize","scrollContainer"]),{onScroll:p}),null,16,["bar-length"]))}});exports.default=g;

package/lib/src/scroll-bar/index.vue2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index.vue.js");exports.default=e.default;

package/lib/src/scroll-bar/interface.d.ts

@@ -0,0 +1,66 @@
+import { CSSProperties, Ref } from 'vue';
+export type ScrollBarDirection = 'vertical' | 'horizontal';
+export type ColorType = CSSProperties['background-color'];
+export interface InternalScrollBarProps {
+    /**
+     * 滚动条的方向
+     */
+    direction?: ScrollBarDirection;
+    /**
+     * 滚动条当前的位置（百分比值）
+     */
+    scroll?: number;
+    /**
+     * 滚动条的长（高）度
+     */
+    barLength?: number;
+    /**
+     * 滚动条的高（宽）度
+     */
+    width?: number;
+    /**
+     * 滚动条的颜色
+     */
+    barColor?: ColorType;
+    /**
+     * 滑轨的颜色
+     */
+    trackColor?: ColorType;
+    /**
+     * 滑动滚到的长度
+     */
+    trackWidth?: number;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示滑轨
+     */
+    showTrack?: boolean;
+    /**
+     * 点击滑轨滚动的速度
+     */
+    trackSpeed?: number;
+    onScrollStart?: (percent: number) => void;
+    onScroll?: (percent: number) => void;
+    onScrollEnd?: (percent: number) => void;
+}
+export interface ScrollBarProps extends Omit<InternalScrollBarProps, 'barLength'> {
+    /**
+     * 可滚动容器
+     */
+    scrollContainer?: HTMLElement;
+    /**
+     * 额外的尺寸（宽/高）
+     */
+    extraSize?: number;
+}
+export interface InternalScrollBarExpose {
+    currentScroll: Ref<number>;
+    container: Ref<HTMLElement>;
+    track: Ref<HTMLElement>;
+    bar: Ref<HTMLElement>;
+    scroll: (percent: number) => void;
+}
+export type ScrollBarExpose = Pick<InternalScrollBarExpose, 'scroll' | 'currentScroll'>;

package/lib/src/scroll-bar/internal.vue.d.ts

@@ -0,0 +1,22 @@
+import { InternalScrollBarProps, ScrollBarDirection } from './interface';
+import { DefineComponent, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function scroll(percent: number): void;
+declare const _default: DefineComponent<InternalScrollBarProps, {
+    currentScroll: Ref<number, number>;
+    container: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    bar: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    track: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    scroll: typeof scroll;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<InternalScrollBarProps> & Readonly<{}>, {
+    scroll: number;
+    disabled: boolean;
+    direction: ScrollBarDirection;
+    barLength: number;
+    showTrack: boolean;
+    trackSpeed: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    container: HTMLDivElement;
+    track: HTMLDivElement;
+    bar: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/lib/src/scroll-bar/internal.vue.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");require("../config-provider/index.js");const T=require("./hooks/use-track.js"),p=require("./utils/index.js"),P=require("../config-provider/hooks/use-namespace.js"),B=t.defineComponent({__name:"internal",props:{direction:{default:"vertical"},scroll:{default:0},barLength:{default:35},width:{},barColor:{},trackColor:{},trackWidth:{},disabled:{type:Boolean,default:!1},showTrack:{type:Boolean,default:!0},trackSpeed:{default:2},onScrollStart:{},onScroll:{},onScrollEnd:{}},setup(y,{expose:E}){const n=y,h=t.ref(),c=t.ref(),l=t.ref(),{b:L,e:b,m:C,em:u,cssVar:R}=P.useNamespace("scroll-bar"),o=t.ref(n.scroll),{handleMouseDown:k}=T.useTrack({currentScroll:o,track:c,bar:l,type:t.toRef(n,"direction"),trackSpeed:t.toRef(n,"trackSpeed"),barLength:t.toRef(n,"barLength"),disabled:t.toRef(n,"disabled"),onDown:e=>{var r;(r=n.onScrollStart)==null||r.call(n,e)},onUp:e=>{var r;(r=n.onScrollEnd)==null||r.call(n,e)},onScroll:e=>{var r;(r=n.onScroll)==null||r.call(n,e)}});t.watch(()=>n.scroll,e=>{o.value=e}),t.watchEffect(()=>{if(!t.unref(l))return;const e=`${(100-n.barLength)*o.value/n.barLength}%`,r=`${n.barLength}%`;n.direction==="vertical"?(l.value.style.height=r,l.value.style.transform=`translate3d(0, ${e}, 0)`):(l.value.style.width=r,l.value.style.transform=`translate3d(${e}, 0, 0)`)});let f,s,d;function M(e){var w;if(n.disabled||e.button!==0)return;e.preventDefault(),e.stopPropagation();const r=t.unref(c),i=t.unref(l);if(!r||!i)return;document.addEventListener("pointermove",v),document.addEventListener("pointerup",m);const a=r.getBoundingClientRect(),S=i.getBoundingClientRect();n.direction==="vertical"?(f=a.height,s=S.top-a.top,d=e.clientY):(f=a.width,s=S.left-a.left,d=e.clientX),(w=n.onScrollStart)==null||w.call(n,t.unref(o))}function v(e){var a;e.stopPropagation(),e.preventDefault();let r;n.direction==="vertical"?r=s+e.clientY-d:r=s+e.clientX-d;const i=r/f/(100-n.barLength)*1e4;o.value=p.ensureRangeValue(i),(a=n.onScroll)==null||a.call(n,t.unref(o))}function m(e){var r;e.preventDefault(),document.removeEventListener("pointermove",v),document.removeEventListener("pointerup",m),(r=n.onScrollEnd)==null||r.call(n,t.unref(o))}function g(e){e.cancelable&&(e.stopPropagation(),e.preventDefault())}function D(e){Math.abs(t.unref(o)-e)<=.001||(o.value=p.ensureRangeValue(e))}return E({currentScroll:o,container:h,bar:l,track:c,scroll:D}),(e,r)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:h,class:t.normalizeClass([t.unref(L)(),t.unref(C)(e.direction)]),style:t.normalizeStyle(t.unref(R)({"bar-color":e.barColor,"track-color":e.trackColor,"bar-width":e.width?`${e.width}px`:void 0,"track-width":e.trackWidth?`${e.trackWidth}px`:void 0}))},[t.createElementVNode("div",{ref_key:"track",ref:c,class:t.normalizeClass([t.unref(b)("track"),e.disabled?t.unref(u)("track","disabled"):null,e.showTrack?null:t.unref(u)("track","hidden")]),onPointerdown:r[0]||(r[0]=(...i)=>t.unref(k)&&t.unref(k)(...i)),onTouchstart:g},null,34),t.createElementVNode("div",{ref_key:"bar",ref:l,class:t.normalizeClass([t.unref(b)("bar"),t.unref(u)("bar",e.direction),e.disabled?t.unref(u)("bar","disabled"):null]),onPointerdown:M,onTouchstart:g},null,34)],6))}});exports.default=B;

package/lib/src/scroll-bar/internal.vue2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./internal.vue.js");exports.default=e.default;

package/lib/src/scroll-bar/style/css.cjs

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/scroll-bar/index.css';

package/lib/src/scroll-bar/style/index.cjs

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/scroll-bar/index.less';

package/lib/src/scroll-bar/utils/index.d.ts

@@ -0,0 +1,22 @@
+import { ScrollBarDirection } from '../interface';
+/**
+ * 保证返回的值在[start,end]范围内
+ * @param target
+ * @param start
+ * @param end
+ * @returns
+ */
+export declare function ensureRangeValue(target: number, start?: number, end?: number): number;
+/**
+ * 获得某个可滚动元素的一些关键数据
+ * @param dom 可滚动元素
+ * @param direction 滚动方向
+ * @returns
+ */
+export declare function getScrollable(dom: HTMLElement, direction: ScrollBarDirection): {
+    totalSize: number;
+    visibleSize: number;
+    distance: number;
+    topOrLeft: string;
+    widthOrHeight: string;
+};

package/lib/src/scroll-bar/utils/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function o(e,t=0,l=100){return Math.max(t,Math.min(e,l))}function r(e,t){const l=t==="horizontal"?"Left":"Top",n=t==="horizontal"?"Width":"Height";return{totalSize:e[`scroll${n}`],visibleSize:e[`offset${n}`],distance:e[`scroll${l}`],topOrLeft:l,widthOrHeight:n}}exports.ensureRangeValue=o;exports.getScrollable=r;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aplus-frontend/ui",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "main": "./lib/index.js",
   "type": "module",
   "files": [

package/theme/index.css

@@ -1720,36 +1720,51 @@ div.aplus-ap-info-layout-admin__header-shadow.aplus-ap-info-layout-admin__sticky
   left: 0px;
   top: -20px;
 }
-.aplus-ap-scroll-bar {
+.aplus-scroll-bar {
   position: relative;
-  background-color: var(--ap-scroll-bar-background, rgba(0, 0, 0, 0.05));
 }
-.aplus-ap-scroll-bar--horizontal {
-  height: 10px;
+.aplus-scroll-bar--horizontal {
+  width: 100%;
+  height: var(--aplus-scroll-bar-track-width, 10px);
 }
-.aplus-ap-scroll-bar--vertical {
-  width: 10px;
+.aplus-scroll-bar--vertical {
+  width: var(--aplus-scroll-bar-track-width, 10px);
   height: 100%;
 }
-.aplus-ap-scroll-bar__bar {
+.aplus-scroll-bar__track {
   position: absolute;
-  border-radius: 8px;
-  background-color: rgba(144, 147, 153, 0.3);
-  background-color: var(--ap-scroll-bar-bar, rgba(144, 147, 153, 0.3));
-  box-shadow: var(--ap-scroll-bar-bar-shadow, inset 0 0 6px rgba(0, 0, 0, 0.2));
+  width: 100%;
+  height: 100%;
+  top: 0;
+  inset-inline-start: 0;
+  cursor: pointer;
+  background-color: var(--aplus-scroll-bar-track-color, rgba(0, 0, 0, 0.05));
 }
-.aplus-ap-scroll-bar__bar--horizontal {
-  height: 8px;
-  top: 1px;
+.aplus-scroll-bar__track--disabled {
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.02);
 }
-.aplus-ap-scroll-bar__bar--vertical {
-  width: 8px;
-  left: 1px;
+.aplus-scroll-bar__track--hidden {
+  pointer-events: none;
+  background-color: transparent;
+}
+.aplus-scroll-bar__bar {
+  position: absolute;
+  border-radius: var(--aplus-scroll-bar-bar-width, 8px);
+  background-color: var(--aplus-scroll-bar-bar-color, #c7c8cc);
+  cursor: pointer;
+}
+.aplus-scroll-bar__bar--disabled {
+  pointer-events: none;
+  box-shadow: none;
+}
+.aplus-scroll-bar__bar--horizontal {
+  height: var(--aplus-scroll-bar-bar-width, 8px);
+  top: calc(var(--aplus-scroll-bar-track-width, 10px) - var(--aplus-scroll-bar-bar-width, 8px));
 }
-.aplus-ap-scroll-bar__bar:hover,
-.aplus-ap-scroll-bar__bar:focus,
-.aplus-ap-scroll-bar__bar:active {
-  background-color: var(--ap-scroll-bar-bar-active, rgba(144, 147, 153, 0.5));
+.aplus-scroll-bar__bar--vertical {
+  width: var(--aplus-scroll-bar-bar-width, 8px);
+  left: calc(var(--aplus-scroll-bar-track-width, 10px) / 2 - var(--aplus-scroll-bar-bar-width, 8px) / 2);
 }
 .aplus-ap-appendix__suffix {
   width: 100%;

package/theme/index.less

@@ -26,7 +26,7 @@
 @import './work-order-modal/index.less';
 @import './ap-summary/index.less';
 @import './ap-table-modal/index.less';
-@import './ap-scroll-bar/index.less';
+@import './scroll-bar/index.less';
 @import './ap-appendix/ap-appendix.less';
 @import './ap-group-search/ap-group-search.less';
 @import './ap-group-search/ap-popover-select.less';

package/theme/scroll-bar/index.css

@@ -0,0 +1,46 @@
+.aplus-scroll-bar {
+  position: relative;
+}
+.aplus-scroll-bar--horizontal {
+  width: 100%;
+  height: var(--aplus-scroll-bar-track-width, 10px);
+}
+.aplus-scroll-bar--vertical {
+  width: var(--aplus-scroll-bar-track-width, 10px);
+  height: 100%;
+}
+.aplus-scroll-bar__track {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  inset-inline-start: 0;
+  cursor: pointer;
+  background-color: var(--aplus-scroll-bar-track-color, rgba(0, 0, 0, 0.05));
+}
+.aplus-scroll-bar__track--disabled {
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.02);
+}
+.aplus-scroll-bar__track--hidden {
+  pointer-events: none;
+  background-color: transparent;
+}
+.aplus-scroll-bar__bar {
+  position: absolute;
+  border-radius: var(--aplus-scroll-bar-bar-width, 8px);
+  background-color: var(--aplus-scroll-bar-bar-color, #c7c8cc);
+  cursor: pointer;
+}
+.aplus-scroll-bar__bar--disabled {
+  pointer-events: none;
+  box-shadow: none;
+}
+.aplus-scroll-bar__bar--horizontal {
+  height: var(--aplus-scroll-bar-bar-width, 8px);
+  top: calc(var(--aplus-scroll-bar-track-width, 10px) - var(--aplus-scroll-bar-bar-width, 8px));
+}
+.aplus-scroll-bar__bar--vertical {
+  width: var(--aplus-scroll-bar-bar-width, 8px);
+  left: calc(var(--aplus-scroll-bar-track-width, 10px) / 2 - var(--aplus-scroll-bar-bar-width, 8px) / 2);
+}

package/theme/scroll-bar/index.less

@@ -0,0 +1,62 @@
+@import '../mixins/mixins.less';
+@import '../mixins/config.less';
+
+@bar: ~'@{ns}-scroll-bar__bar--disabled';
+@bc: ~'--@{ns}-scroll-bar-bar-color';
+@tc: ~'--@{ns}-scroll-bar-track-color';
+@bw: ~'--@{ns}-scroll-bar-bar-width';
+@tw: ~'--@{ns}-scroll-bar-track-width';
+
+.b('scroll-bar', {
+  position: relative;
+
+  &--horizontal {
+    width: 100%;
+    height: var(@tw, 10px);
+  }
+
+  &--vertical {
+    width: var(@tw, 10px);
+    height: 100%;
+  }
+
+  &__track {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    inset-inline-start: 0;
+    cursor: pointer;
+    background-color:  var(@tc, rgb(0 0 0 / 5%));
+    &--disabled {
+      pointer-events: none;
+      background-color: rgb(0 0 0 / 2%);
+    }
+    &--hidden {
+      pointer-events: none;
+      background-color: transparent;
+    }
+  }
+
+  &__bar {
+    position: absolute;
+    border-radius: var(@bw, 8px);
+    background-color:  var(@bc, #c7c8cc);
+    cursor: pointer;
+
+    &--disabled {
+      pointer-events: none;
+      box-shadow: none;
+    }
+
+    &--horizontal {
+      height: var(@bw, 8px);
+      top: calc(var(@tw, 10px) - var(@bw, 8px));
+    }
+
+    &--vertical {
+      width: var(@bw, 8px);
+      left: calc(var(@tw, 10px) / 2 - var(@bw, 8px) / 2);
+    }
+  }
+});

package/es/src/ap-scroll-bar/ap-scroll-bar.vue.d.ts

@@ -1,8 +0,0 @@
-import { ApScrollBarProps } from './interface';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare const _default: DefineComponent<ApScrollBarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ApScrollBarProps> & Readonly<{}>, {
-    type: "horizontal" | "vertical";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-    containerRef: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;

package/es/src/ap-scroll-bar/ap-scroll-bar.vue.mjs

@@ -1,4 +0,0 @@
-import f from "./ap-scroll-bar.vue2.mjs";
-export {
-  f as default
-};

package/es/src/ap-scroll-bar/ap-scroll-bar.vue2.mjs

@@ -1,116 +0,0 @@
-import { defineComponent as O, ref as a, nextTick as $, onMounted as Q, watch as Z, onUnmounted as ee, openBlock as te, createElementBlock as le, normalizeClass as N, unref as u, normalizeStyle as U, createElementVNode as oe } from "vue";
-import "../config-provider/index.mjs";
-import { Subject as ae, fromEvent as v, map as _, takeUntil as h, throttleTime as X, concatAll as Y, withLatestFrom as ne } from "rxjs";
-import { useNamespace as ce } from "../config-provider/hooks/use-namespace.mjs";
-const ve = /* @__PURE__ */ O({
-  __name: "ap-scroll-bar",
-  props: {
-    target: {},
-    type: {
-      default: "horizontal"
-    }
-  },
-  setup(j) {
-    const o = j, r = a(), H = a(0), T = a(0), p = a(0), d = a(0), g = a(), y = a(), b = a(), W = a(), t = a(), w = a(!1), f = new ae(), z = a();
-    let k = 0, B = 0;
-    const E = (e) => e / y.value, S = (e) => e * y.value, R = () => {
-      if (t.value)
-        if (o.type === "horizontal") {
-          const e = t.value.scrollWidth, l = t.value.clientWidth;
-          w.value = l >= e;
-        } else {
-          const e = t.value.scrollHeight, l = t.value.clientHeight;
-          w.value = l >= e;
-        }
-    }, L = () => {
-      if (t.value && r.value)
-        if (o.type === "horizontal") {
-          const e = t.value.scrollWidth, l = t.value.clientWidth, n = t.value.scrollLeft, s = r.value.clientWidth;
-          g.value = l / e, y.value = s / e, H.value = Math.round(s * g.value), p.value = S(n);
-        } else {
-          const e = t.value.scrollHeight, l = t.value.clientHeight, n = t.value.scrollTop, s = r.value.clientHeight;
-          g.value = l / e, y.value = s / e, T.value = Math.floor(s * g.value), d.value = E(n);
-        }
-    }, P = () => {
-      const e = v(W.value, "mousedown"), l = v(b.value, "mousemove"), n = v(b.value, "mouseup"), s = v(b.value, "selectstart");
-      e.pipe(_(() => s.pipe(h(n), h(f), X(16))), Y()).subscribe((c) => c.preventDefault()), e.pipe(_(() => l.pipe(h(n), h(f), X(16))), Y(), ne(e), _(([c, x]) => {
-        console.log("move!!!", c);
-        const m = c, i = x, C = m.pageX - z.value.left - i.offsetX, M = m.pageY - z.value.top - i.offsetY, J = r.value.clientWidth, K = r.value.clientHeight;
-        return {
-          x: C > 0 ? Math.min(C, J - H.value) : Math.max(C, 0),
-          y: M > 0 ? Math.min(M, K - T.value) : Math.max(M, 0)
-        };
-      })).subscribe((c) => {
-        var x, m;
-        if (o.type === "horizontal") {
-          const i = E(c.x);
-          c.x !== p.value && t.value && ((x = t.value) == null || x.scrollTo({
-            left: i
-          })), p.value = c.x;
-        } else {
-          const i = E(c.y);
-          c.y !== d.value && t.value && ((m = t.value) == null || m.scrollTo({
-            top: i
-          })), d.value = c.y;
-        }
-      });
-    }, q = () => {
-      t.value && v(t.value, "scroll").pipe(h(f)).subscribe((l) => {
-        var s;
-        const n = l.target;
-        n && o.type === "horizontal" && (k = n.scrollLeft, p.value = S(k)), n && o.type === "vertical" && B !== ((s = t == null ? void 0 : t.value) == null ? void 0 : s.scrollTop) && (B = n.scrollTop, d.value = S(B));
-      });
-    }, A = () => {
-      v(window, "resize").pipe(h(f)).subscribe(() => {
-        R(), $(() => {
-          var l;
-          z.value = (l = r.value) == null ? void 0 : l.getBoundingClientRect(), L();
-        });
-      });
-    }, F = () => {
-      console.log("targetEle.value", t.value), t.value && W.value && (R(), $(() => {
-        var e;
-        z.value = (e = r.value) == null ? void 0 : e.getBoundingClientRect(), L(), P(), q(), A();
-      }));
-    };
-    Q(() => {
-      Z(() => o.target, () => {
-        $(() => {
-          var e, l;
-          typeof o.target == "string" ? t.value = document.querySelector(o.target) : t.value = (e = o.target) == null ? void 0 : e.call(o), b.value = (l = document.getElementsByTagName("body")) == null ? void 0 : l[0], W.value = document.getElementById("bar"), F();
-        });
-      }, {
-        immediate: !0
-      });
-    }), ee(() => {
-      f.next(0);
-    });
-    const {
-      b: V,
-      e: G,
-      m: D,
-      em: I
-    } = ce("ap-scroll-bar");
-    return (e, l) => (te(), le("div", {
-      ref_key: "containerRef",
-      ref: r,
-      class: N(`${u(V)()} ${o.type === "horizontal" ? u(D)("horizontal") : u(D)("vertical")}`),
-      style: U({
-        display: w.value ? "none" : "block"
-      })
-    }, [oe("div", {
-      id: "bar",
-      class: N(`${u(G)("bar")} ${o.type === "horizontal" ? u(I)("bar", "horizontal") : u(I)("bar", "vertical")}`),
-      style: U(o.type === "horizontal" ? {
-        width: `${H.value}px`,
-        left: `${p.value}px`
-      } : {
-        height: `${T.value}px`,
-        top: `${d.value}px`
-      })
-    }, null, 6)], 6));
-  }
-});
-export {
-  ve as default
-};

package/es/src/ap-scroll-bar/index.d.ts

@@ -1,29 +0,0 @@
-import { CreateComponentPublicInstanceWithMixins, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
-import { ApScrollBarProps } from './interface';
-export * from './interface';
-declare const ApScrollBar: {
-    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
-        type: "horizontal" | "vertical";
-    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-        containerRef: HTMLDivElement;
-    }, HTMLDivElement, ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, {
-        type: "horizontal" | "vertical";
-    }>;
-    __isFragment?: never;
-    __isTeleport?: never;
-    __isSuspense?: never;
-} & ComponentOptionsBase<Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
-    type: "horizontal" | "vertical";
-}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & ( Plugin & (new (...args: any[]) => {
-    $props: {
-        onClick?: () => void;
-    };
-}));
-export { ApScrollBar };

package/es/src/ap-scroll-bar/index.mjs

@@ -1,8 +0,0 @@
-import "./interface.mjs";
-import { withInstall as o } from "@aplus-frontend/utils";
-import "./ap-scroll-bar.vue.mjs";
-import r from "./ap-scroll-bar.vue2.mjs";
-const l = o(r);
-export {
-  l as ApScrollBar
-};

package/es/src/ap-scroll-bar/interface.d.ts

@@ -1,4 +0,0 @@
-export interface ApScrollBarProps {
-    target: string | (() => Element);
-    type?: 'horizontal' | 'vertical';
-}

package/es/src/ap-scroll-bar/style/css.js

@@ -1 +0,0 @@
-import '@aplus-frontend/ui/theme/ap-scroll-bar/index.css';