@v-c/slider 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/Handles/Handle.cjs +195 -1
  2. package/dist/Handles/Handle.d.ts +4 -4
  3. package/dist/Handles/Handle.js +191 -204
  4. package/dist/Handles/index.cjs +108 -1
  5. package/dist/Handles/index.d.ts +1 -1
  6. package/dist/Handles/index.js +105 -120
  7. package/dist/Marks/Mark.cjs +51 -1
  8. package/dist/Marks/Mark.d.ts +2 -2
  9. package/dist/Marks/Mark.js +48 -39
  10. package/dist/Marks/index.cjs +39 -1
  11. package/dist/Marks/index.d.ts +2 -2
  12. package/dist/Marks/index.js +36 -32
  13. package/dist/Slider.cjs +569 -1
  14. package/dist/Slider.d.ts +53 -267
  15. package/dist/Slider.js +563 -352
  16. package/dist/Steps/Dot.cjs +52 -1
  17. package/dist/Steps/Dot.d.ts +2 -2
  18. package/dist/Steps/Dot.js +49 -38
  19. package/dist/Steps/index.cjs +64 -1
  20. package/dist/Steps/index.d.ts +2 -2
  21. package/dist/Steps/index.js +61 -41
  22. package/dist/Tracks/Track.cjs +74 -1
  23. package/dist/Tracks/Track.js +70 -81
  24. package/dist/Tracks/index.cjs +70 -1
  25. package/dist/Tracks/index.js +66 -82
  26. package/dist/_virtual/rolldown_runtime.cjs +21 -0
  27. package/dist/context.cjs +39 -1
  28. package/dist/context.d.ts +13 -7
  29. package/dist/context.js +29 -24
  30. package/dist/hooks/useDrag.cjs +160 -1
  31. package/dist/hooks/useDrag.d.ts +2 -2
  32. package/dist/hooks/useDrag.js +155 -86
  33. package/dist/hooks/useOffset.cjs +124 -1
  34. package/dist/hooks/useOffset.d.ts +2 -1
  35. package/dist/hooks/useOffset.js +122 -110
  36. package/dist/hooks/useRange.cjs +21 -1
  37. package/dist/hooks/useRange.js +18 -9
  38. package/dist/index.cjs +6 -1
  39. package/dist/index.d.ts +1 -0
  40. package/dist/index.js +4 -4
  41. package/dist/interface.cjs +0 -1
  42. package/dist/interface.js +0 -1
  43. package/dist/util.cjs +32 -1
  44. package/dist/util.js +27 -26
  45. package/package.json +18 -10
  46. package/docs/TooltipSlider.tsx +0 -94
  47. package/docs/assets/anim.less +0 -63
  48. package/docs/assets/bootstrap.less +0 -163
  49. package/docs/assets/index.less +0 -337
  50. package/docs/debug.vue +0 -59
  51. package/docs/editable.vue +0 -58
  52. package/docs/handle.vue +0 -51
  53. package/docs/marks.vue +0 -104
  54. package/docs/multiple.vue +0 -50
  55. package/docs/range.vue +0 -224
  56. package/docs/slider.stories.vue +0 -45
  57. package/docs/sliderDemo.vue +0 -283
  58. package/docs/vertical.vue +0 -135
  59. package/src/Handles/Handle.tsx +0 -232
  60. package/src/Handles/index.tsx +0 -132
  61. package/src/Marks/Mark.tsx +0 -40
  62. package/src/Marks/index.tsx +0 -40
  63. package/src/Slider.tsx +0 -602
  64. package/src/Steps/Dot.tsx +0 -40
  65. package/src/Steps/index.tsx +0 -54
  66. package/src/Tracks/Track.tsx +0 -89
  67. package/src/Tracks/index.tsx +0 -92
  68. package/src/context.ts +0 -65
  69. package/src/hooks/useDrag.ts +0 -243
  70. package/src/hooks/useOffset.ts +0 -272
  71. package/src/hooks/useRange.ts +0 -24
  72. package/src/index.ts +0 -8
  73. package/src/interface.ts +0 -17
  74. package/src/util.ts +0 -41
  75. package/vite.config.ts +0 -18
  76. package/vitest.config.ts +0 -11
@@ -1 +1,52 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("vue"),f=require("classnames"),m=require("../context.cjs"),g=require("../util.cjs"),p=(i,{attrs:u})=>{const{prefixCls:o,value:e,activeStyle:t}=i,{min:s,max:r,direction:a,included:d,includedStart:v,includedEnd:y}=m.useInjectSlider(),c=`${o}-dot`,n=d&&v<=e&&e<=y;let l={...g.getDirectionStyle(a.value,e,s.value,r.value)};return n&&(l={...l,...typeof t=="function"?t(e):t}),S.createVNode("span",{class:f(c,{[`${c}-active`]:n}),style:{...l,...u.style}},null)};exports.default=p;
1
+ Object.defineProperty(exports, "__esModule", { value: true });
2
+ const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
3
+ const require_context = require("../context.cjs");
4
+ const require_util = require("../util.cjs");
5
+ let vue = require("vue");
6
+ let __v_c_util = require("@v-c/util");
7
+ var Dot = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
8
+ const sliderContext = require_context.useInjectSlider();
9
+ return () => {
10
+ const { min, max, direction, included, includedStart, includedEnd } = sliderContext.value;
11
+ const { prefixCls, value, activeStyle } = props;
12
+ const dotClassName = `${prefixCls}-dot`;
13
+ const active = included && includedStart <= value && value <= includedEnd;
14
+ let mergedStyle = { ...require_util.getDirectionStyle(direction, value, min, max) };
15
+ if (active) mergedStyle = {
16
+ ...mergedStyle,
17
+ ...typeof activeStyle === "function" ? activeStyle(value) : activeStyle
18
+ };
19
+ return (0, vue.createVNode)("span", {
20
+ "class": (0, __v_c_util.classNames)(dotClassName, { [`${dotClassName}-active`]: active }),
21
+ "style": {
22
+ ...mergedStyle,
23
+ ...attrs.style
24
+ }
25
+ }, null);
26
+ };
27
+ }, { props: {
28
+ prefixCls: {
29
+ type: String,
30
+ required: true,
31
+ default: void 0
32
+ },
33
+ value: {
34
+ type: Number,
35
+ required: true,
36
+ default: void 0
37
+ },
38
+ style: {
39
+ type: Function,
40
+ required: false,
41
+ skipCheck: true,
42
+ default: void 0
43
+ },
44
+ activeStyle: {
45
+ type: Function,
46
+ required: false,
47
+ skipCheck: true,
48
+ default: void 0
49
+ }
50
+ } });
51
+ var Dot_default = Dot;
52
+ exports.default = Dot_default;
@@ -1,9 +1,9 @@
1
- import { CSSProperties, FunctionalComponent } from 'vue';
1
+ import { CSSProperties } from 'vue';
2
2
  export interface DotProps {
3
3
  prefixCls: string;
4
4
  value: number;
5
5
  style?: CSSProperties | ((dotValue: number) => CSSProperties);
6
6
  activeStyle?: CSSProperties | ((dotValue: number) => CSSProperties);
7
7
  }
8
- declare const Dot: FunctionalComponent<DotProps>;
8
+ declare const Dot: import('vue').DefineSetupFnComponent<DotProps, {}, {}, DotProps & {}, import('vue').PublicProps>;
9
9
  export default Dot;
package/dist/Steps/Dot.js CHANGED
@@ -1,38 +1,49 @@
1
- import { createVNode as p } from "vue";
2
- import v from "classnames";
3
- import { useInjectSlider as y } from "../context.js";
4
- import { getDirectionStyle as S } from "../util.js";
5
- const N = (c, {
6
- attrs: n
7
- }) => {
8
- const {
9
- prefixCls: r,
10
- value: e,
11
- activeStyle: t
12
- } = c, {
13
- min: a,
14
- max: s,
15
- direction: d,
16
- included: m,
17
- includedStart: u,
18
- includedEnd: f
19
- } = y(), l = `${r}-dot`, i = m && u <= e && e <= f;
20
- let o = {
21
- ...S(d.value, e, a.value, s.value)
22
- };
23
- return i && (o = {
24
- ...o,
25
- ...typeof t == "function" ? t(e) : t
26
- }), p("span", {
27
- class: v(l, {
28
- [`${l}-active`]: i
29
- }),
30
- style: {
31
- ...o,
32
- ...n.style
33
- }
34
- }, null);
35
- };
36
- export {
37
- N as default
38
- };
1
+ import { useInjectSlider } from "../context.js";
2
+ import { getDirectionStyle } from "../util.js";
3
+ import { createVNode, defineComponent } from "vue";
4
+ import { classNames } from "@v-c/util";
5
+ var Dot_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
6
+ const sliderContext = useInjectSlider();
7
+ return () => {
8
+ const { min, max, direction, included, includedStart, includedEnd } = sliderContext.value;
9
+ const { prefixCls, value, activeStyle } = props;
10
+ const dotClassName = `${prefixCls}-dot`;
11
+ const active = included && includedStart <= value && value <= includedEnd;
12
+ let mergedStyle = { ...getDirectionStyle(direction, value, min, max) };
13
+ if (active) mergedStyle = {
14
+ ...mergedStyle,
15
+ ...typeof activeStyle === "function" ? activeStyle(value) : activeStyle
16
+ };
17
+ return createVNode("span", {
18
+ "class": classNames(dotClassName, { [`${dotClassName}-active`]: active }),
19
+ "style": {
20
+ ...mergedStyle,
21
+ ...attrs.style
22
+ }
23
+ }, null);
24
+ };
25
+ }, { props: {
26
+ prefixCls: {
27
+ type: String,
28
+ required: true,
29
+ default: void 0
30
+ },
31
+ value: {
32
+ type: Number,
33
+ required: true,
34
+ default: void 0
35
+ },
36
+ style: {
37
+ type: Function,
38
+ required: false,
39
+ skipCheck: true,
40
+ default: void 0
41
+ },
42
+ activeStyle: {
43
+ type: Function,
44
+ required: false,
45
+ skipCheck: true,
46
+ default: void 0
47
+ }
48
+ } });
49
+ export { Dot_default as default };
@@ -1 +1,64 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),p=require("../context.cjs"),f=require("./Dot.cjs"),S=(u,{attrs:a})=>{const{prefixCls:l,marks:o,dots:c,activeStyle:n}=u,{min:i,max:d,step:s}=p.useInjectSlider(),v=r.computed(()=>{const e=new Set;if(o.forEach(t=>{e.add(t.value)}),c&&s!==null){let t=i.value;for(;t<=d.value;)e.add(t),t+=s.value}return Array.from(e)});return r.createVNode("div",{class:`${l}-step`},[v.value.map(e=>r.createVNode(f.default,{prefixCls:l,key:e,value:e,style:{...a.style},activeStyle:n},null))])};exports.default=S;
1
+ Object.defineProperty(exports, "__esModule", { value: true });
2
+ const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
3
+ const require_context = require("../context.cjs");
4
+ const require_Dot = require("./Dot.cjs");
5
+ let vue = require("vue");
6
+ var Steps = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
7
+ const sliderContext = require_context.useInjectSlider();
8
+ const stepDots = (0, vue.computed)(() => {
9
+ const { max, min, step } = sliderContext.value;
10
+ const { marks, dots } = props;
11
+ const dotSet = /* @__PURE__ */ new Set();
12
+ marks.forEach((mark) => {
13
+ dotSet.add(mark.value);
14
+ });
15
+ if (dots && step !== null) {
16
+ let current = min;
17
+ while (current <= max) {
18
+ dotSet.add(current);
19
+ current += step;
20
+ }
21
+ }
22
+ return Array.from(dotSet);
23
+ });
24
+ return () => {
25
+ const { prefixCls, activeStyle } = props;
26
+ return (0, vue.createVNode)("div", { "class": `${prefixCls}-step` }, [stepDots.value.map((dotValue) => (0, vue.createVNode)(require_Dot.default, {
27
+ "prefixCls": prefixCls,
28
+ "key": dotValue,
29
+ "value": dotValue,
30
+ "style": { ...attrs.style },
31
+ "activeStyle": activeStyle
32
+ }, null))]);
33
+ };
34
+ }, { props: {
35
+ prefixCls: {
36
+ type: String,
37
+ required: true,
38
+ default: void 0
39
+ },
40
+ marks: {
41
+ type: Array,
42
+ required: true,
43
+ default: void 0
44
+ },
45
+ dots: {
46
+ type: Boolean,
47
+ required: false,
48
+ default: void 0
49
+ },
50
+ style: {
51
+ type: Function,
52
+ required: false,
53
+ skipCheck: true,
54
+ default: void 0
55
+ },
56
+ activeStyle: {
57
+ type: Function,
58
+ required: false,
59
+ skipCheck: true,
60
+ default: void 0
61
+ }
62
+ } });
63
+ var Steps_default = Steps;
64
+ exports.default = Steps_default;
@@ -1,4 +1,4 @@
1
- import { CSSProperties, FunctionalComponent } from 'vue';
1
+ import { CSSProperties } from 'vue';
2
2
  import { InternalMarkObj } from '../Marks';
3
3
  export interface StepsProps {
4
4
  prefixCls: string;
@@ -7,5 +7,5 @@ export interface StepsProps {
7
7
  style?: CSSProperties | ((dotValue: number) => CSSProperties);
8
8
  activeStyle?: CSSProperties | ((dotValue: number) => CSSProperties);
9
9
  }
10
- declare const Steps: FunctionalComponent<StepsProps>;
10
+ declare const Steps: import('vue').DefineSetupFnComponent<StepsProps, {}, {}, StepsProps & {}, import('vue').PublicProps>;
11
11
  export default Steps;
@@ -1,41 +1,61 @@
1
- import { computed as d, createVNode as s } from "vue";
2
- import { useInjectSlider as f } from "../context.js";
3
- import v from "./Dot.js";
4
- const h = (o, {
5
- attrs: a
6
- }) => {
7
- const {
8
- prefixCls: r,
9
- marks: c,
10
- dots: n,
11
- activeStyle: u
12
- } = o, {
13
- min: i,
14
- max: m,
15
- step: l
16
- } = f(), p = d(() => {
17
- const e = /* @__PURE__ */ new Set();
18
- if (c.forEach((t) => {
19
- e.add(t.value);
20
- }), n && l !== null) {
21
- let t = i.value;
22
- for (; t <= m.value; )
23
- e.add(t), t += l.value;
24
- }
25
- return Array.from(e);
26
- });
27
- return s("div", {
28
- class: `${r}-step`
29
- }, [p.value.map((e) => s(v, {
30
- prefixCls: r,
31
- key: e,
32
- value: e,
33
- style: {
34
- ...a.style
35
- },
36
- activeStyle: u
37
- }, null))]);
38
- };
39
- export {
40
- h as default
41
- };
1
+ import { useInjectSlider } from "../context.js";
2
+ import Dot_default from "./Dot.js";
3
+ import { computed, createVNode, defineComponent } from "vue";
4
+ var Steps_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
5
+ const sliderContext = useInjectSlider();
6
+ const stepDots = computed(() => {
7
+ const { max, min, step } = sliderContext.value;
8
+ const { marks, dots } = props;
9
+ const dotSet = /* @__PURE__ */ new Set();
10
+ marks.forEach((mark) => {
11
+ dotSet.add(mark.value);
12
+ });
13
+ if (dots && step !== null) {
14
+ let current = min;
15
+ while (current <= max) {
16
+ dotSet.add(current);
17
+ current += step;
18
+ }
19
+ }
20
+ return Array.from(dotSet);
21
+ });
22
+ return () => {
23
+ const { prefixCls, activeStyle } = props;
24
+ return createVNode("div", { "class": `${prefixCls}-step` }, [stepDots.value.map((dotValue) => createVNode(Dot_default, {
25
+ "prefixCls": prefixCls,
26
+ "key": dotValue,
27
+ "value": dotValue,
28
+ "style": { ...attrs.style },
29
+ "activeStyle": activeStyle
30
+ }, null))]);
31
+ };
32
+ }, { props: {
33
+ prefixCls: {
34
+ type: String,
35
+ required: true,
36
+ default: void 0
37
+ },
38
+ marks: {
39
+ type: Array,
40
+ required: true,
41
+ default: void 0
42
+ },
43
+ dots: {
44
+ type: Boolean,
45
+ required: false,
46
+ default: void 0
47
+ },
48
+ style: {
49
+ type: Function,
50
+ required: false,
51
+ skipCheck: true,
52
+ default: void 0
53
+ },
54
+ activeStyle: {
55
+ type: Function,
56
+ required: false,
57
+ skipCheck: true,
58
+ default: void 0
59
+ }
60
+ } });
61
+ export { Steps_default as default };
@@ -1 +1,74 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("vue"),h=require("classnames"),M=require("../context.cjs"),d=require("../util.cjs"),q=c.defineComponent({name:"Track",props:{prefixCls:{type:String,required:!0},replaceCls:{type:String},start:{type:Number,required:!0},end:{type:Number,required:!0},index:{type:Number,default:()=>null},onStartMove:{type:Function}},setup(a,{attrs:f}){const{direction:v,min:s,max:o,disabled:b,range:p,classNames:g}=M.useInjectSlider(),S=r=>{!b&&a.onStartMove&&a.onStartMove(r,-1)};return()=>{const{prefixCls:r,index:l,onStartMove:u,replaceCls:$,start:m,end:y}=a,t=d.getOffset(m,s.value,o.value),n=d.getOffset(y,s.value,o.value),i=`${r}-track`,k=$||h(i,{[`${i}-${l+1}`]:l!==null&&p,[`${r}-track-draggable`]:u},g.track),e={};switch(v.value){case"rtl":e.right=`${t*100}%`,e.width=`${n*100-t*100}%`;break;case"btt":e.bottom=`${t*100}%`,e.height=`${n*100-t*100}%`;break;case"ttb":e.top=`${t*100}%`,e.height=`${n*100-t*100}%`;break;default:e.left=`${t*100}%`,e.width=`${n*100-t*100}%`}return c.createVNode("div",{class:k,style:{...e,...f.style},onMousedown:u?S:void 0},null)}}});exports.default=q;
1
+ Object.defineProperty(exports, "__esModule", { value: true });
2
+ const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
3
+ const require_context = require("../context.cjs");
4
+ const require_util = require("../util.cjs");
5
+ let vue = require("vue");
6
+ let __v_c_util = require("@v-c/util");
7
+ var Track = /* @__PURE__ */ (0, vue.defineComponent)({
8
+ name: "Track",
9
+ props: {
10
+ prefixCls: {
11
+ type: String,
12
+ required: true
13
+ },
14
+ replaceCls: { type: String },
15
+ start: {
16
+ type: Number,
17
+ required: true
18
+ },
19
+ end: {
20
+ type: Number,
21
+ required: true
22
+ },
23
+ index: {
24
+ type: Number,
25
+ default: () => null
26
+ },
27
+ onStartMove: { type: Function }
28
+ },
29
+ setup(props, { attrs }) {
30
+ const sliderContext = require_context.useInjectSlider();
31
+ const onInternalStartMove = (e) => {
32
+ if (!sliderContext.value.disabled && props.onStartMove) props.onStartMove(e, -1);
33
+ };
34
+ return () => {
35
+ const { prefixCls, index, onStartMove, replaceCls, start, end } = props;
36
+ const { direction, min, max, range, classNames } = sliderContext.value;
37
+ const offsetStart = require_util.getOffset(start, min, max);
38
+ const offsetEnd = require_util.getOffset(end, min, max);
39
+ const trackPrefixCls = `${prefixCls}-track`;
40
+ const className = replaceCls || (0, __v_c_util.classNames)(trackPrefixCls, {
41
+ [`${trackPrefixCls}-${index + 1}`]: index !== null && range,
42
+ [`${prefixCls}-track-draggable`]: onStartMove
43
+ }, classNames.track);
44
+ const positionStyle = {};
45
+ switch (direction) {
46
+ case "rtl":
47
+ positionStyle.right = `${offsetStart * 100}%`;
48
+ positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
49
+ break;
50
+ case "btt":
51
+ positionStyle.bottom = `${offsetStart * 100}%`;
52
+ positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`;
53
+ break;
54
+ case "ttb":
55
+ positionStyle.top = `${offsetStart * 100}%`;
56
+ positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`;
57
+ break;
58
+ default:
59
+ positionStyle.left = `${offsetStart * 100}%`;
60
+ positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
61
+ }
62
+ return (0, vue.createVNode)("div", {
63
+ "class": className,
64
+ "style": {
65
+ ...positionStyle,
66
+ ...attrs.style
67
+ },
68
+ "onMousedown": onStartMove ? onInternalStartMove : void 0
69
+ }, null);
70
+ };
71
+ }
72
+ });
73
+ var Track_default = Track;
74
+ exports.default = Track_default;
@@ -1,82 +1,71 @@
1
- import { defineComponent as y, createVNode as h } from "vue";
2
- import x from "classnames";
3
- import { useInjectSlider as C } from "../context.js";
4
- import { getOffset as u } from "../util.js";
5
- const I = /* @__PURE__ */ y({
6
- name: "Track",
7
- props: {
8
- prefixCls: {
9
- type: String,
10
- required: !0
11
- },
12
- replaceCls: {
13
- type: String
14
- },
15
- start: {
16
- type: Number,
17
- required: !0
18
- },
19
- end: {
20
- type: Number,
21
- required: !0
22
- },
23
- index: {
24
- type: Number,
25
- default: () => null
26
- },
27
- onStartMove: {
28
- type: Function
29
- }
30
- },
31
- setup(n, {
32
- attrs: d
33
- }) {
34
- const {
35
- direction: f,
36
- min: o,
37
- max: s,
38
- disabled: m,
39
- range: p,
40
- classNames: $
41
- } = C(), b = (r) => {
42
- !m && n.onStartMove && n.onStartMove(r, -1);
43
- };
44
- return () => {
45
- const {
46
- prefixCls: r,
47
- index: l,
48
- onStartMove: i,
49
- replaceCls: v,
50
- start: S,
51
- end: g
52
- } = n, t = u(S, o.value, s.value), a = u(g, o.value, s.value), c = `${r}-track`, k = v || x(c, {
53
- [`${c}-${l + 1}`]: l !== null && p,
54
- [`${r}-track-draggable`]: i
55
- }, $.track), e = {};
56
- switch (f.value) {
57
- case "rtl":
58
- e.right = `${t * 100}%`, e.width = `${a * 100 - t * 100}%`;
59
- break;
60
- case "btt":
61
- e.bottom = `${t * 100}%`, e.height = `${a * 100 - t * 100}%`;
62
- break;
63
- case "ttb":
64
- e.top = `${t * 100}%`, e.height = `${a * 100 - t * 100}%`;
65
- break;
66
- default:
67
- e.left = `${t * 100}%`, e.width = `${a * 100 - t * 100}%`;
68
- }
69
- return h("div", {
70
- class: k,
71
- style: {
72
- ...e,
73
- ...d.style
74
- },
75
- onMousedown: i ? b : void 0
76
- }, null);
77
- };
78
- }
1
+ import { useInjectSlider } from "../context.js";
2
+ import { getOffset } from "../util.js";
3
+ import { createVNode, defineComponent } from "vue";
4
+ import { classNames } from "@v-c/util";
5
+ var Track_default = /* @__PURE__ */ defineComponent({
6
+ name: "Track",
7
+ props: {
8
+ prefixCls: {
9
+ type: String,
10
+ required: true
11
+ },
12
+ replaceCls: { type: String },
13
+ start: {
14
+ type: Number,
15
+ required: true
16
+ },
17
+ end: {
18
+ type: Number,
19
+ required: true
20
+ },
21
+ index: {
22
+ type: Number,
23
+ default: () => null
24
+ },
25
+ onStartMove: { type: Function }
26
+ },
27
+ setup(props, { attrs }) {
28
+ const sliderContext = useInjectSlider();
29
+ const onInternalStartMove = (e) => {
30
+ if (!sliderContext.value.disabled && props.onStartMove) props.onStartMove(e, -1);
31
+ };
32
+ return () => {
33
+ const { prefixCls, index, onStartMove, replaceCls, start, end } = props;
34
+ const { direction, min, max, range, classNames: classNames$1 } = sliderContext.value;
35
+ const offsetStart = getOffset(start, min, max);
36
+ const offsetEnd = getOffset(end, min, max);
37
+ const trackPrefixCls = `${prefixCls}-track`;
38
+ const className = replaceCls || classNames(trackPrefixCls, {
39
+ [`${trackPrefixCls}-${index + 1}`]: index !== null && range,
40
+ [`${prefixCls}-track-draggable`]: onStartMove
41
+ }, classNames$1.track);
42
+ const positionStyle = {};
43
+ switch (direction) {
44
+ case "rtl":
45
+ positionStyle.right = `${offsetStart * 100}%`;
46
+ positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
47
+ break;
48
+ case "btt":
49
+ positionStyle.bottom = `${offsetStart * 100}%`;
50
+ positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`;
51
+ break;
52
+ case "ttb":
53
+ positionStyle.top = `${offsetStart * 100}%`;
54
+ positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`;
55
+ break;
56
+ default:
57
+ positionStyle.left = `${offsetStart * 100}%`;
58
+ positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
59
+ }
60
+ return createVNode("div", {
61
+ "class": className,
62
+ "style": {
63
+ ...positionStyle,
64
+ ...attrs.style
65
+ },
66
+ "onMousedown": onStartMove ? onInternalStartMove : void 0
67
+ }, null);
68
+ };
69
+ }
79
70
  });
80
- export {
81
- I as default
82
- };
71
+ export { Track_default as default };
@@ -1 +1,70 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),f=require("classnames"),k=require("../context.cjs"),y=require("../util.cjs"),i=require("./Track.cjs"),m=r.defineComponent({name:"Tracks",props:{prefixCls:{type:String,required:!0},trackStyle:{type:[Object,Array]},values:{type:Array,required:!0},onStartMove:{type:Function},startPoint:{type:Number}},setup(e){const{included:o,range:d,min:v,styles:u,classNames:c}=k.useInjectSlider(),a=r.computed(()=>{if(!d){if(e.values.length===0)return[];const t=e.startPoint??v.value,n=e.values[0];return[{start:Math.min(t,n),end:Math.max(t,n)}]}const l=[];for(let t=0;t<e.values.length-1;t+=1)l.push({start:e.values[t],end:e.values[t+1]});return l});return()=>{if(!o)return null;const l=a.value?.length&&(c.tracks||u.tracks)?r.createVNode(i.default,{index:0,prefixCls:e.prefixCls,start:a.value[0].start,end:a.value[a.value.length-1].end,replaceCls:f(c.tracks,`${e.prefixCls}-tracks`),style:u.tracks},null):null;return r.createVNode(r.Fragment,null,[l,a.value.map(({start:t,end:n},s)=>r.createVNode(i.default,{index:s,prefixCls:e.prefixCls,style:{...y.getIndex(e.trackStyle,s),...u?.track},start:t,end:n,key:s,onStartMove:e.onStartMove},null))])}}});exports.default=m;
1
+ Object.defineProperty(exports, "__esModule", { value: true });
2
+ const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
3
+ const require_context = require("../context.cjs");
4
+ const require_util = require("../util.cjs");
5
+ const require_Track = require("./Track.cjs");
6
+ let vue = require("vue");
7
+ let __v_c_util = require("@v-c/util");
8
+ var Tracks = /* @__PURE__ */ (0, vue.defineComponent)({
9
+ name: "Tracks",
10
+ props: {
11
+ prefixCls: {
12
+ type: String,
13
+ required: true
14
+ },
15
+ trackStyle: { type: [Object, Array] },
16
+ values: {
17
+ type: Array,
18
+ required: true
19
+ },
20
+ onStartMove: { type: Function },
21
+ startPoint: { type: Number }
22
+ },
23
+ setup(props) {
24
+ const sliderContext = require_context.useInjectSlider();
25
+ const trackList = (0, vue.computed)(() => {
26
+ const range = sliderContext.value.range;
27
+ const min = sliderContext.value.min;
28
+ if (!range) {
29
+ if (props.values.length === 0) return [];
30
+ const startValue = props.startPoint ?? min;
31
+ const endValue = props.values[0];
32
+ return [{
33
+ start: Math.min(startValue, endValue),
34
+ end: Math.max(startValue, endValue)
35
+ }];
36
+ }
37
+ const list = [];
38
+ for (let i = 0; i < props.values.length - 1; i += 1) list.push({
39
+ start: props.values[i],
40
+ end: props.values[i + 1]
41
+ });
42
+ return list;
43
+ });
44
+ return () => {
45
+ if (!sliderContext.value.included) return null;
46
+ const { classNames, styles } = sliderContext.value;
47
+ return (0, vue.createVNode)(vue.Fragment, null, [trackList.value?.length && (classNames.tracks || styles.tracks) ? (0, vue.createVNode)(require_Track.default, {
48
+ "index": 0,
49
+ "prefixCls": props.prefixCls,
50
+ "start": trackList.value[0].start,
51
+ "end": trackList.value[trackList.value.length - 1].end,
52
+ "replaceCls": (0, __v_c_util.classNames)(classNames.tracks, `${props.prefixCls}-tracks`),
53
+ "style": styles.tracks
54
+ }, null) : null, trackList.value.map(({ start, end }, index) => (0, vue.createVNode)(require_Track.default, {
55
+ "index": index,
56
+ "prefixCls": props.prefixCls,
57
+ "style": {
58
+ ...require_util.getIndex(props.trackStyle, index),
59
+ ...styles?.track
60
+ },
61
+ "start": start,
62
+ "end": end,
63
+ "key": index,
64
+ "onStartMove": props.onStartMove
65
+ }, null))]);
66
+ };
67
+ }
68
+ });
69
+ var Tracks_default = Tracks;
70
+ exports.default = Tracks_default;