@mekari/pixel3-slider 0.0.4 → 0.0.5-dev.0

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 (18) hide show
  1. package/dist/{chunk-SXAHQ4O2.mjs → chunk-AX2E5DRG.mjs} +1 -1
  2. package/dist/{chunk-KTN7D244.mjs → chunk-NJDSOT4O.mjs} +18 -26
  3. package/dist/{chunk-BEKWS6QE.mjs → chunk-T52MRHGI.mjs} +9 -7
  4. package/dist/index.js +25 -31
  5. package/dist/index.mjs +3 -3
  6. package/dist/metafile-cjs.json +1 -1
  7. package/dist/metafile-esm.json +1 -1
  8. package/dist/modules/slider.hooks.d.mts +7 -0
  9. package/dist/modules/slider.hooks.d.ts +7 -0
  10. package/dist/modules/slider.hooks.js +17 -25
  11. package/dist/modules/slider.hooks.mjs +1 -1
  12. package/dist/modules/slider.props.js +1 -1
  13. package/dist/modules/slider.props.mjs +1 -1
  14. package/dist/slider.d.mts +1 -1
  15. package/dist/slider.d.ts +1 -1
  16. package/dist/slider.js +25 -31
  17. package/dist/slider.mjs +3 -3
  18. package/package.json +4 -4
package/dist/{chunk-SXAHQ4O2.mjs → chunk-AX2E5DRG.mjs} RENAMED
@@ -26,7 +26,7 @@ var sliderProps = {
26
26
  },
27
27
  color: {
28
28
  type: String,
29
- default: "sky.100"
29
+ default: ""
30
30
  },
31
31
  gradientColor: {
32
32
  type: Array,
package/dist/{chunk-KTN7D244.mjs → chunk-NJDSOT4O.mjs} RENAMED
@@ -4,8 +4,7 @@ import {
4
4
 
5
5
  // src/modules/slider.hooks.ts
6
6
  import { computed, ref, toRefs } from "vue";
7
- import { getUniqueId } from "@mekari/pixel3-utils";
8
- import { css, cx } from "@mekari/pixel3-styled-system/css";
7
+ import { getUniqueId, usePixelTheme } from "@mekari/pixel3-utils";
9
8
  import { token } from "@mekari/pixel3-styled-system/tokens";
10
9
  import { sliderSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
11
10
  function useSlider(props, emit) {
@@ -25,6 +24,9 @@ function useSlider(props, emit) {
25
24
  const isMinPressed = ref(false);
26
25
  const isMaxPressed = ref(false);
27
26
  const getId = id.value || getUniqueId("", "slider").value;
27
+ const {
28
+ isNextTheme
29
+ } = usePixelTheme();
28
30
  const rootAttrs = computed(() => {
29
31
  return {
30
32
  "data-pixel-component": "MpSlider",
@@ -43,7 +45,9 @@ function useSlider(props, emit) {
43
45
  };
44
46
  });
45
47
  const progressAttrs = computed(() => {
46
- const background = isGradient.value ? handleGradientColor(gradientColor.value) : token(`colors.${color.value}`) || color.value;
48
+ const propColor = token(`colors.${color.value}`) || color.value;
49
+ const defaultColor = token(`colors.${isNextTheme.value ? "chart.cat01" : "sky.100"}`);
50
+ const background = isGradient.value ? handleGradientColor(gradientColor.value) : propColor || defaultColor;
47
51
  return {
48
52
  class: sliderSlotRecipe().progress,
49
53
  style: {
@@ -54,7 +58,8 @@ function useSlider(props, emit) {
54
58
  const sliderAttrs = computed(() => {
55
59
  const leftValue = isRangeSlider.value ? 0 : (currentValue.value - min.value) / (max.value - min.value) * 100;
56
60
  const rightValue = 0;
57
- const background = isRangeSlider.value ? `linear-gradient(to right, #EDF0F2 ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, #EDF0F2 ${maxRangeValue.value}%)` : token("colors.gray.50");
61
+ const color2 = isNextTheme.value ? token("colors.background.neutral.subtle") : token("colors.gray.50");
62
+ const background = isRangeSlider.value ? `linear-gradient(to right, ${color2} ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, ${color2} ${maxRangeValue.value}%)` : color2;
58
63
  return {
59
64
  class: sliderSlotRecipe().slider,
60
65
  style: {
@@ -78,17 +83,10 @@ function useSlider(props, emit) {
78
83
  step: step.value,
79
84
  value: isRangeSlider.value ? minRangeValue.value : currentValue.value,
80
85
  disabled: isDisabled.value,
81
- class: cx(sliderSlotRecipe().input, css({
82
- pointerEvents: isRangeSlider.value ? "none" : "auto",
83
- "&::-webkit-slider-thumb": {
84
- background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
85
- borderWidth: isMinPressed.value ? "1.5px" : "1px",
86
- cursor: isDisabled.value ? "not-allowed" : "pointer",
87
- _hover: {
88
- borderColor: isMinPressed.value ? "blue.400" : "gray.400"
89
- }
90
- }
91
- })),
86
+ class: sliderSlotRecipe().input,
87
+ style: {
88
+ pointerEvents: isRangeSlider.value ? "none" : "auto"
89
+ },
92
90
  onInput: (e) => handleInput(e, "min"),
93
91
  onChange: handleChange,
94
92
  onMouseup: handleRelease,
@@ -104,17 +102,11 @@ function useSlider(props, emit) {
104
102
  step: step.value,
105
103
  value: maxRangeValue.value,
106
104
  disabled: isDisabled.value,
107
- class: cx(sliderSlotRecipe().input, css({
108
- pointerEvents: "none",
109
- "&::-webkit-slider-thumb": {
110
- background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
111
- borderWidth: isMaxPressed.value ? "1.5px" : "1px",
112
- cursor: isDisabled.value ? "not-allowed" : "pointer",
113
- _hover: {
114
- borderColor: isMaxPressed.value ? "blue.400" : "gray.400"
115
- }
116
- }
117
- })),
105
+ class: sliderSlotRecipe().input,
106
+ maxpressed: isMaxPressed.value,
107
+ style: {
108
+ pointerEvents: "none"
109
+ },
118
110
  onInput: (e) => handleInput(e, "max"),
119
111
  onChange: handleChange,
120
112
  onMouseup: handleRelease,
package/dist/{chunk-BEKWS6QE.mjs → chunk-T52MRHGI.mjs} RENAMED
@@ -1,15 +1,16 @@
1
1
  import {
2
2
  useSlider
3
- } from "./chunk-KTN7D244.mjs";
3
+ } from "./chunk-NJDSOT4O.mjs";
4
4
  import {
5
5
  sliderEmits,
6
6
  sliderProps
7
- } from "./chunk-SXAHQ4O2.mjs";
7
+ } from "./chunk-AX2E5DRG.mjs";
8
8
 
9
9
  // src/slider.tsx
10
10
  import { createVNode as _createVNode } from "vue";
11
11
  import { defineComponent } from "vue";
12
12
  import { MpText } from "@mekari/pixel3-text";
13
+ import { usePixelTheme } from "@mekari/pixel3-utils";
13
14
  var MpSlider = defineComponent({
14
15
  name: "MpSlider",
15
16
  props: sliderProps,
@@ -18,6 +19,9 @@ var MpSlider = defineComponent({
18
19
  slots,
19
20
  emit
20
21
  }) {
22
+ const {
23
+ isNextTheme
24
+ } = usePixelTheme();
21
25
  const {
22
26
  rootAttrs,
23
27
  labelWrapperAttrs,
@@ -46,24 +50,22 @@ var MpSlider = defineComponent({
46
50
  const maxSlots = slots.max && slots.max();
47
51
  const valueText = isRangeSlider.value ? `${minRangeValue.value} - ${maxRangeValue.value}` : currentValue.value;
48
52
  return _createVNode("div", rootAttrs.value, [_createVNode("div", labelWrapperAttrs.value, [_createVNode(MpText, {
49
- "size": "label",
50
- "color": "dark"
53
+ "size": "label"
51
54
  }, {
52
55
  default: () => [label ? label : "Label"]
53
56
  }), _createVNode(MpText, {
54
57
  "size": "label",
55
- "color": "dark",
56
58
  "weight": "semiBold"
57
59
  }, {
58
60
  default: () => [value ? value : valueText]
59
61
  })]), _createVNode("div", sliderWrapperAttrs.value, [_createVNode("div", progressAttrs.value, [_createVNode("div", sliderAttrs.value, null)]), _createVNode("div", inputWrapperAttrs.value, [_createVNode("input", inputMinAttrs.value, null), isRangeSlider.value && _createVNode("input", inputMaxAttrs.value, null)])]), _createVNode("div", legendWrapperAttrs.value, [_createVNode(MpText, {
60
62
  "size": "label-small",
61
- "color": "gray.600"
63
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
62
64
  }, {
63
65
  default: () => [minSlots ? minSlots : min]
64
66
  }), _createVNode(MpText, {
65
67
  "size": "label-small",
66
- "color": "gray.600"
68
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
67
69
  }, {
68
70
  default: () => [maxSlots ? maxSlots : max]
69
71
  })])]);
package/dist/index.js CHANGED
@@ -29,11 +29,11 @@ module.exports = __toCommonJS(src_exports);
29
29
  var import_vue2 = require("vue");
30
30
  var import_vue3 = require("vue");
31
31
  var import_pixel3_text = require("@mekari/pixel3-text");
32
+ var import_pixel3_utils2 = require("@mekari/pixel3-utils");
32
33
 
33
34
  // src/modules/slider.hooks.ts
34
35
  var import_vue = require("vue");
35
36
  var import_pixel3_utils = require("@mekari/pixel3-utils");
36
- var import_css = require("@mekari/pixel3-styled-system/css");
37
37
  var import_tokens = require("@mekari/pixel3-styled-system/tokens");
38
38
  var import_recipes = require("@mekari/pixel3-styled-system/recipes");
39
39
  function useSlider(props, emit) {
@@ -53,6 +53,9 @@ function useSlider(props, emit) {
53
53
  const isMinPressed = (0, import_vue.ref)(false);
54
54
  const isMaxPressed = (0, import_vue.ref)(false);
55
55
  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "slider").value;
56
+ const {
57
+ isNextTheme
58
+ } = (0, import_pixel3_utils.usePixelTheme)();
56
59
  const rootAttrs = (0, import_vue.computed)(() => {
57
60
  return {
58
61
  "data-pixel-component": "MpSlider",
@@ -71,7 +74,9 @@ function useSlider(props, emit) {
71
74
  };
72
75
  });
73
76
  const progressAttrs = (0, import_vue.computed)(() => {
74
- const background = isGradient.value ? handleGradientColor(gradientColor.value) : (0, import_tokens.token)(`colors.${color.value}`) || color.value;
77
+ const propColor = (0, import_tokens.token)(`colors.${color.value}`) || color.value;
78
+ const defaultColor = (0, import_tokens.token)(`colors.${isNextTheme.value ? "chart.cat01" : "sky.100"}`);
79
+ const background = isGradient.value ? handleGradientColor(gradientColor.value) : propColor || defaultColor;
75
80
  return {
76
81
  class: (0, import_recipes.sliderSlotRecipe)().progress,
77
82
  style: {
@@ -82,7 +87,8 @@ function useSlider(props, emit) {
82
87
  const sliderAttrs = (0, import_vue.computed)(() => {
83
88
  const leftValue = isRangeSlider.value ? 0 : (currentValue.value - min.value) / (max.value - min.value) * 100;
84
89
  const rightValue = 0;
85
- const background = isRangeSlider.value ? `linear-gradient(to right, #EDF0F2 ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, #EDF0F2 ${maxRangeValue.value}%)` : (0, import_tokens.token)("colors.gray.50");
90
+ const color2 = isNextTheme.value ? (0, import_tokens.token)("colors.background.neutral.subtle") : (0, import_tokens.token)("colors.gray.50");
91
+ const background = isRangeSlider.value ? `linear-gradient(to right, ${color2} ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, ${color2} ${maxRangeValue.value}%)` : color2;
86
92
  return {
87
93
  class: (0, import_recipes.sliderSlotRecipe)().slider,
88
94
  style: {
@@ -106,17 +112,10 @@ function useSlider(props, emit) {
106
112
  step: step.value,
107
113
  value: isRangeSlider.value ? minRangeValue.value : currentValue.value,
108
114
  disabled: isDisabled.value,
109
- class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
110
- pointerEvents: isRangeSlider.value ? "none" : "auto",
111
- "&::-webkit-slider-thumb": {
112
- background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
113
- borderWidth: isMinPressed.value ? "1.5px" : "1px",
114
- cursor: isDisabled.value ? "not-allowed" : "pointer",
115
- _hover: {
116
- borderColor: isMinPressed.value ? "blue.400" : "gray.400"
117
- }
118
- }
119
- })),
115
+ class: (0, import_recipes.sliderSlotRecipe)().input,
116
+ style: {
117
+ pointerEvents: isRangeSlider.value ? "none" : "auto"
118
+ },
120
119
  onInput: (e) => handleInput(e, "min"),
121
120
  onChange: handleChange,
122
121
  onMouseup: handleRelease,
@@ -132,17 +131,11 @@ function useSlider(props, emit) {
132
131
  step: step.value,
133
132
  value: maxRangeValue.value,
134
133
  disabled: isDisabled.value,
135
- class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
136
- pointerEvents: "none",
137
- "&::-webkit-slider-thumb": {
138
- background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
139
- borderWidth: isMaxPressed.value ? "1.5px" : "1px",
140
- cursor: isDisabled.value ? "not-allowed" : "pointer",
141
- _hover: {
142
- borderColor: isMaxPressed.value ? "blue.400" : "gray.400"
143
- }
144
- }
145
- })),
134
+ class: (0, import_recipes.sliderSlotRecipe)().input,
135
+ maxpressed: isMaxPressed.value,
136
+ style: {
137
+ pointerEvents: "none"
138
+ },
146
139
  onInput: (e) => handleInput(e, "max"),
147
140
  onChange: handleChange,
148
141
  onMouseup: handleRelease,
@@ -259,7 +252,7 @@ var sliderProps = {
259
252
  },
260
253
  color: {
261
254
  type: String,
262
- default: "sky.100"
255
+ default: ""
263
256
  },
264
257
  gradientColor: {
265
258
  type: Array,
@@ -285,6 +278,9 @@ var MpSlider = (0, import_vue3.defineComponent)({
285
278
  slots,
286
279
  emit
287
280
  }) {
281
+ const {
282
+ isNextTheme
283
+ } = (0, import_pixel3_utils2.usePixelTheme)();
288
284
  const {
289
285
  rootAttrs,
290
286
  labelWrapperAttrs,
@@ -313,24 +309,22 @@ var MpSlider = (0, import_vue3.defineComponent)({
313
309
  const maxSlots = slots.max && slots.max();
314
310
  const valueText = isRangeSlider.value ? `${minRangeValue.value} - ${maxRangeValue.value}` : currentValue.value;
315
311
  return (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createVNode)("div", labelWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
316
- "size": "label",
317
- "color": "dark"
312
+ "size": "label"
318
313
  }, {
319
314
  default: () => [label ? label : "Label"]
320
315
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
321
316
  "size": "label",
322
- "color": "dark",
323
317
  "weight": "semiBold"
324
318
  }, {
325
319
  default: () => [value ? value : valueText]
326
320
  })]), (0, import_vue2.createVNode)("div", sliderWrapperAttrs.value, [(0, import_vue2.createVNode)("div", progressAttrs.value, [(0, import_vue2.createVNode)("div", sliderAttrs.value, null)]), (0, import_vue2.createVNode)("div", inputWrapperAttrs.value, [(0, import_vue2.createVNode)("input", inputMinAttrs.value, null), isRangeSlider.value && (0, import_vue2.createVNode)("input", inputMaxAttrs.value, null)])]), (0, import_vue2.createVNode)("div", legendWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
327
321
  "size": "label-small",
328
- "color": "gray.600"
322
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
329
323
  }, {
330
324
  default: () => [minSlots ? minSlots : min]
331
325
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
332
326
  "size": "label-small",
333
- "color": "gray.600"
327
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
334
328
  }, {
335
329
  default: () => [maxSlots ? maxSlots : max]
336
330
  })])]);
package/dist/index.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  MpSlider
3
- } from "./chunk-BEKWS6QE.mjs";
4
- import "./chunk-KTN7D244.mjs";
5
- import "./chunk-SXAHQ4O2.mjs";
3
+ } from "./chunk-T52MRHGI.mjs";
4
+ import "./chunk-NJDSOT4O.mjs";
5
+ import "./chunk-AX2E5DRG.mjs";
6
6
  import "./chunk-QZ7VFGWC.mjs";
7
7
  export {
8
8
  MpSlider
package/dist/metafile-cjs.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"src/modules/slider.hooks.ts":{"bytes":6822,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/slider.props.ts":{"bytes":1276,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2363,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"src/modules/slider.hooks.ts","kind":"import-statement","original":"./modules/slider.hooks"},{"path":"src/modules/slider.props.ts","kind":"import-statement","original":"./modules/slider.props"}],"format":"esm"},"src/index.ts":{"bytes":121,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":121},"src/slider.tsx":{"bytesInOutput":2427},"src/modules/slider.hooks.ts":{"bytesInOutput":7147},"src/modules/slider.props.ts":{"bytesInOutput":677}},"bytes":11482},"dist/slider.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/slider.tsx","inputs":{"src/slider.tsx":{"bytesInOutput":2557},"src/modules/slider.hooks.ts":{"bytesInOutput":7147},"src/modules/slider.props.ts":{"bytesInOutput":677}},"bytes":11474},"dist/modules/slider.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/slider.hooks.ts","inputs":{"src/modules/slider.hooks.ts":{"bytesInOutput":7297}},"bytes":8321},"dist/modules/slider.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/slider.props.ts","inputs":{"src/modules/slider.props.ts":{"bytesInOutput":865}},"bytes":1816}}}
1
+ {"inputs":{"src/modules/slider.hooks.ts":{"bytes":6314,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/slider.props.ts":{"bytes":1269,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2500,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/slider.hooks.ts","kind":"import-statement","original":"./modules/slider.hooks"},{"path":"src/modules/slider.props.ts","kind":"import-statement","original":"./modules/slider.props"}],"format":"esm"},"src/index.ts":{"bytes":121,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":121},"src/slider.tsx":{"bytesInOutput":2596},"src/modules/slider.hooks.ts":{"bytesInOutput":6576},"src/modules/slider.props.ts":{"bytesInOutput":670}},"bytes":11073},"dist/slider.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/slider.tsx","inputs":{"src/slider.tsx":{"bytesInOutput":2726},"src/modules/slider.hooks.ts":{"bytesInOutput":6576},"src/modules/slider.props.ts":{"bytesInOutput":670}},"bytes":11065},"dist/modules/slider.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/slider.hooks.ts","inputs":{"src/modules/slider.hooks.ts":{"bytesInOutput":6726}},"bytes":7750},"dist/modules/slider.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/slider.props.ts","inputs":{"src/modules/slider.props.ts":{"bytesInOutput":858}},"bytes":1809}}}
package/dist/metafile-esm.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"src/modules/slider.hooks.ts":{"bytes":6822,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/slider.props.ts":{"bytes":1276,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2363,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"src/modules/slider.hooks.ts","kind":"import-statement","original":"./modules/slider.hooks"},{"path":"src/modules/slider.props.ts","kind":"import-statement","original":"./modules/slider.props"}],"format":"esm"},"src/index.ts":{"bytes":121,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-BEKWS6QE.mjs","kind":"import-statement"},{"path":"dist/chunk-KTN7D244.mjs","kind":"import-statement"},{"path":"dist/chunk-SXAHQ4O2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":167},"dist/slider.mjs":{"imports":[{"path":"dist/chunk-BEKWS6QE.mjs","kind":"import-statement"},{"path":"dist/chunk-KTN7D244.mjs","kind":"import-statement"},{"path":"dist/chunk-SXAHQ4O2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/slider.tsx","inputs":{},"bytes":167},"dist/chunk-BEKWS6QE.mjs":{"imports":[{"path":"dist/chunk-KTN7D244.mjs","kind":"import-statement"},{"path":"dist/chunk-SXAHQ4O2.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true}],"exports":["MpSlider"],"inputs":{"src/slider.tsx":{"bytesInOutput":2137}},"bytes":2301},"dist/modules/slider.hooks.mjs":{"imports":[{"path":"dist/chunk-KTN7D244.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useSlider"],"entryPoint":"src/modules/slider.hooks.ts","inputs":{},"bytes":109},"dist/chunk-KTN7D244.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useSlider"],"inputs":{"src/modules/slider.hooks.ts":{"bytesInOutput":6564}},"bytes":6670},"dist/modules/slider.props.mjs":{"imports":[{"path":"dist/chunk-SXAHQ4O2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["sliderEmits","sliderProps"],"entryPoint":"src/modules/slider.props.ts","inputs":{},"bytes":143},"dist/chunk-SXAHQ4O2.mjs":{"imports":[],"exports":["sliderEmits","sliderProps"],"inputs":{"src/modules/slider.props.ts":{"bytesInOutput":677}},"bytes":750},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}
1
+ {"inputs":{"src/modules/slider.hooks.ts":{"bytes":6314,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/slider.props.ts":{"bytes":1269,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2500,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/slider.hooks.ts","kind":"import-statement","original":"./modules/slider.hooks"},{"path":"src/modules/slider.props.ts","kind":"import-statement","original":"./modules/slider.props"}],"format":"esm"},"src/index.ts":{"bytes":121,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-T52MRHGI.mjs","kind":"import-statement"},{"path":"dist/chunk-NJDSOT4O.mjs","kind":"import-statement"},{"path":"dist/chunk-AX2E5DRG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":167},"dist/slider.mjs":{"imports":[{"path":"dist/chunk-T52MRHGI.mjs","kind":"import-statement"},{"path":"dist/chunk-NJDSOT4O.mjs","kind":"import-statement"},{"path":"dist/chunk-AX2E5DRG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/slider.tsx","inputs":{},"bytes":167},"dist/chunk-T52MRHGI.mjs":{"imports":[{"path":"dist/chunk-NJDSOT4O.mjs","kind":"import-statement"},{"path":"dist/chunk-AX2E5DRG.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["MpSlider"],"inputs":{"src/slider.tsx":{"bytesInOutput":2274}},"bytes":2438},"dist/modules/slider.hooks.mjs":{"imports":[{"path":"dist/chunk-NJDSOT4O.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useSlider"],"entryPoint":"src/modules/slider.hooks.ts","inputs":{},"bytes":109},"dist/chunk-NJDSOT4O.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useSlider"],"inputs":{"src/modules/slider.hooks.ts":{"bytesInOutput":6011}},"bytes":6117},"dist/modules/slider.props.mjs":{"imports":[{"path":"dist/chunk-AX2E5DRG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["sliderEmits","sliderProps"],"entryPoint":"src/modules/slider.props.ts","inputs":{},"bytes":143},"dist/chunk-AX2E5DRG.mjs":{"imports":[],"exports":["sliderEmits","sliderProps"],"inputs":{"src/modules/slider.props.ts":{"bytesInOutput":670}},"bytes":743},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}
package/dist/modules/slider.hooks.d.mts CHANGED
@@ -41,6 +41,9 @@ declare function useSlider(props: SliderProps, emit: SliderEmits): {
41
41
  value: number | false | number[];
42
42
  disabled: boolean;
43
43
  class: string;
44
+ style: {
45
+ pointerEvents: "none" | "auto";
46
+ };
44
47
  onInput: (e: Event) => void;
45
48
  onChange: () => void;
46
49
  onMouseup: () => void;
@@ -55,6 +58,10 @@ declare function useSlider(props: SliderProps, emit: SliderEmits): {
55
58
  value: number | false;
56
59
  disabled: boolean;
57
60
  class: string;
61
+ maxpressed: boolean;
62
+ style: {
63
+ pointerEvents: "none";
64
+ };
58
65
  onInput: (e: Event) => void;
59
66
  onChange: () => void;
60
67
  onMouseup: () => void;
package/dist/modules/slider.hooks.d.ts CHANGED
@@ -41,6 +41,9 @@ declare function useSlider(props: SliderProps, emit: SliderEmits): {
41
41
  value: number | false | number[];
42
42
  disabled: boolean;
43
43
  class: string;
44
+ style: {
45
+ pointerEvents: "none" | "auto";
46
+ };
44
47
  onInput: (e: Event) => void;
45
48
  onChange: () => void;
46
49
  onMouseup: () => void;
@@ -55,6 +58,10 @@ declare function useSlider(props: SliderProps, emit: SliderEmits): {
55
58
  value: number | false;
56
59
  disabled: boolean;
57
60
  class: string;
61
+ maxpressed: boolean;
62
+ style: {
63
+ pointerEvents: "none";
64
+ };
58
65
  onInput: (e: Event) => void;
59
66
  onChange: () => void;
60
67
  onMouseup: () => void;
package/dist/modules/slider.hooks.js CHANGED
@@ -26,7 +26,6 @@ __export(slider_hooks_exports, {
26
26
  module.exports = __toCommonJS(slider_hooks_exports);
27
27
  var import_vue = require("vue");
28
28
  var import_pixel3_utils = require("@mekari/pixel3-utils");
29
- var import_css = require("@mekari/pixel3-styled-system/css");
30
29
  var import_tokens = require("@mekari/pixel3-styled-system/tokens");
31
30
  var import_recipes = require("@mekari/pixel3-styled-system/recipes");
32
31
  function useSlider(props, emit) {
@@ -46,6 +45,9 @@ function useSlider(props, emit) {
46
45
  const isMinPressed = (0, import_vue.ref)(false);
47
46
  const isMaxPressed = (0, import_vue.ref)(false);
48
47
  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "slider").value;
48
+ const {
49
+ isNextTheme
50
+ } = (0, import_pixel3_utils.usePixelTheme)();
49
51
  const rootAttrs = (0, import_vue.computed)(() => {
50
52
  return {
51
53
  "data-pixel-component": "MpSlider",
@@ -64,7 +66,9 @@ function useSlider(props, emit) {
64
66
  };
65
67
  });
66
68
  const progressAttrs = (0, import_vue.computed)(() => {
67
- const background = isGradient.value ? handleGradientColor(gradientColor.value) : (0, import_tokens.token)(`colors.${color.value}`) || color.value;
69
+ const propColor = (0, import_tokens.token)(`colors.${color.value}`) || color.value;
70
+ const defaultColor = (0, import_tokens.token)(`colors.${isNextTheme.value ? "chart.cat01" : "sky.100"}`);
71
+ const background = isGradient.value ? handleGradientColor(gradientColor.value) : propColor || defaultColor;
68
72
  return {
69
73
  class: (0, import_recipes.sliderSlotRecipe)().progress,
70
74
  style: {
@@ -75,7 +79,8 @@ function useSlider(props, emit) {
75
79
  const sliderAttrs = (0, import_vue.computed)(() => {
76
80
  const leftValue = isRangeSlider.value ? 0 : (currentValue.value - min.value) / (max.value - min.value) * 100;
77
81
  const rightValue = 0;
78
- const background = isRangeSlider.value ? `linear-gradient(to right, #EDF0F2 ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, #EDF0F2 ${maxRangeValue.value}%)` : (0, import_tokens.token)("colors.gray.50");
82
+ const color2 = isNextTheme.value ? (0, import_tokens.token)("colors.background.neutral.subtle") : (0, import_tokens.token)("colors.gray.50");
83
+ const background = isRangeSlider.value ? `linear-gradient(to right, ${color2} ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, ${color2} ${maxRangeValue.value}%)` : color2;
79
84
  return {
80
85
  class: (0, import_recipes.sliderSlotRecipe)().slider,
81
86
  style: {
@@ -99,17 +104,10 @@ function useSlider(props, emit) {
99
104
  step: step.value,
100
105
  value: isRangeSlider.value ? minRangeValue.value : currentValue.value,
101
106
  disabled: isDisabled.value,
102
- class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
103
- pointerEvents: isRangeSlider.value ? "none" : "auto",
104
- "&::-webkit-slider-thumb": {
105
- background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
106
- borderWidth: isMinPressed.value ? "1.5px" : "1px",
107
- cursor: isDisabled.value ? "not-allowed" : "pointer",
108
- _hover: {
109
- borderColor: isMinPressed.value ? "blue.400" : "gray.400"
110
- }
111
- }
112
- })),
107
+ class: (0, import_recipes.sliderSlotRecipe)().input,
108
+ style: {
109
+ pointerEvents: isRangeSlider.value ? "none" : "auto"
110
+ },
113
111
  onInput: (e) => handleInput(e, "min"),
114
112
  onChange: handleChange,
115
113
  onMouseup: handleRelease,
@@ -125,17 +123,11 @@ function useSlider(props, emit) {
125
123
  step: step.value,
126
124
  value: maxRangeValue.value,
127
125
  disabled: isDisabled.value,
128
- class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
129
- pointerEvents: "none",
130
- "&::-webkit-slider-thumb": {
131
- background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
132
- borderWidth: isMaxPressed.value ? "1.5px" : "1px",
133
- cursor: isDisabled.value ? "not-allowed" : "pointer",
134
- _hover: {
135
- borderColor: isMaxPressed.value ? "blue.400" : "gray.400"
136
- }
137
- }
138
- })),
126
+ class: (0, import_recipes.sliderSlotRecipe)().input,
127
+ maxpressed: isMaxPressed.value,
128
+ style: {
129
+ pointerEvents: "none"
130
+ },
139
131
  onInput: (e) => handleInput(e, "max"),
140
132
  onChange: handleChange,
141
133
  onMouseup: handleRelease,
package/dist/modules/slider.hooks.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useSlider
3
- } from "../chunk-KTN7D244.mjs";
3
+ } from "../chunk-NJDSOT4O.mjs";
4
4
  import "../chunk-QZ7VFGWC.mjs";
5
5
  export {
6
6
  useSlider
package/dist/modules/slider.props.js CHANGED
@@ -51,7 +51,7 @@ var sliderProps = {
51
51
  },
52
52
  color: {
53
53
  type: String,
54
- default: "sky.100"
54
+ default: ""
55
55
  },
56
56
  gradientColor: {
57
57
  type: Array,
package/dist/modules/slider.props.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  sliderEmits,
3
3
  sliderProps
4
- } from "../chunk-SXAHQ4O2.mjs";
4
+ } from "../chunk-AX2E5DRG.mjs";
5
5
  import "../chunk-QZ7VFGWC.mjs";
6
6
  export {
7
7
  sliderEmits,
package/dist/slider.d.mts CHANGED
@@ -88,9 +88,9 @@ declare const MpSlider: vue.DefineComponent<{
88
88
  }>> & {
89
89
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
90
90
  }, {
91
+ value: number | number[];
91
92
  color: _mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken;
92
93
  id: string;
93
- value: number | number[];
94
94
  max: number;
95
95
  min: number;
96
96
  step: number;
package/dist/slider.d.ts CHANGED
@@ -88,9 +88,9 @@ declare const MpSlider: vue.DefineComponent<{
88
88
  }>> & {
89
89
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
90
90
  }, {
91
+ value: number | number[];
91
92
  color: _mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken;
92
93
  id: string;
93
- value: number | number[];
94
94
  max: number;
95
95
  min: number;
96
96
  step: number;
package/dist/slider.js CHANGED
@@ -27,11 +27,11 @@ module.exports = __toCommonJS(slider_exports);
27
27
  var import_vue2 = require("vue");
28
28
  var import_vue3 = require("vue");
29
29
  var import_pixel3_text = require("@mekari/pixel3-text");
30
+ var import_pixel3_utils2 = require("@mekari/pixel3-utils");
30
31
 
31
32
  // src/modules/slider.hooks.ts
32
33
  var import_vue = require("vue");
33
34
  var import_pixel3_utils = require("@mekari/pixel3-utils");
34
- var import_css = require("@mekari/pixel3-styled-system/css");
35
35
  var import_tokens = require("@mekari/pixel3-styled-system/tokens");
36
36
  var import_recipes = require("@mekari/pixel3-styled-system/recipes");
37
37
  function useSlider(props, emit) {
@@ -51,6 +51,9 @@ function useSlider(props, emit) {
51
51
  const isMinPressed = (0, import_vue.ref)(false);
52
52
  const isMaxPressed = (0, import_vue.ref)(false);
53
53
  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "slider").value;
54
+ const {
55
+ isNextTheme
56
+ } = (0, import_pixel3_utils.usePixelTheme)();
54
57
  const rootAttrs = (0, import_vue.computed)(() => {
55
58
  return {
56
59
  "data-pixel-component": "MpSlider",
@@ -69,7 +72,9 @@ function useSlider(props, emit) {
69
72
  };
70
73
  });
71
74
  const progressAttrs = (0, import_vue.computed)(() => {
72
- const background = isGradient.value ? handleGradientColor(gradientColor.value) : (0, import_tokens.token)(`colors.${color.value}`) || color.value;
75
+ const propColor = (0, import_tokens.token)(`colors.${color.value}`) || color.value;
76
+ const defaultColor = (0, import_tokens.token)(`colors.${isNextTheme.value ? "chart.cat01" : "sky.100"}`);
77
+ const background = isGradient.value ? handleGradientColor(gradientColor.value) : propColor || defaultColor;
73
78
  return {
74
79
  class: (0, import_recipes.sliderSlotRecipe)().progress,
75
80
  style: {
@@ -80,7 +85,8 @@ function useSlider(props, emit) {
80
85
  const sliderAttrs = (0, import_vue.computed)(() => {
81
86
  const leftValue = isRangeSlider.value ? 0 : (currentValue.value - min.value) / (max.value - min.value) * 100;
82
87
  const rightValue = 0;
83
- const background = isRangeSlider.value ? `linear-gradient(to right, #EDF0F2 ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, #EDF0F2 ${maxRangeValue.value}%)` : (0, import_tokens.token)("colors.gray.50");
88
+ const color2 = isNextTheme.value ? (0, import_tokens.token)("colors.background.neutral.subtle") : (0, import_tokens.token)("colors.gray.50");
89
+ const background = isRangeSlider.value ? `linear-gradient(to right, ${color2} ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, ${color2} ${maxRangeValue.value}%)` : color2;
84
90
  return {
85
91
  class: (0, import_recipes.sliderSlotRecipe)().slider,
86
92
  style: {
@@ -104,17 +110,10 @@ function useSlider(props, emit) {
104
110
  step: step.value,
105
111
  value: isRangeSlider.value ? minRangeValue.value : currentValue.value,
106
112
  disabled: isDisabled.value,
107
- class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
108
- pointerEvents: isRangeSlider.value ? "none" : "auto",
109
- "&::-webkit-slider-thumb": {
110
- background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
111
- borderWidth: isMinPressed.value ? "1.5px" : "1px",
112
- cursor: isDisabled.value ? "not-allowed" : "pointer",
113
- _hover: {
114
- borderColor: isMinPressed.value ? "blue.400" : "gray.400"
115
- }
116
- }
117
- })),
113
+ class: (0, import_recipes.sliderSlotRecipe)().input,
114
+ style: {
115
+ pointerEvents: isRangeSlider.value ? "none" : "auto"
116
+ },
118
117
  onInput: (e) => handleInput(e, "min"),
119
118
  onChange: handleChange,
120
119
  onMouseup: handleRelease,
@@ -130,17 +129,11 @@ function useSlider(props, emit) {
130
129
  step: step.value,
131
130
  value: maxRangeValue.value,
132
131
  disabled: isDisabled.value,
133
- class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
134
- pointerEvents: "none",
135
- "&::-webkit-slider-thumb": {
136
- background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
137
- borderWidth: isMaxPressed.value ? "1.5px" : "1px",
138
- cursor: isDisabled.value ? "not-allowed" : "pointer",
139
- _hover: {
140
- borderColor: isMaxPressed.value ? "blue.400" : "gray.400"
141
- }
142
- }
143
- })),
132
+ class: (0, import_recipes.sliderSlotRecipe)().input,
133
+ maxpressed: isMaxPressed.value,
134
+ style: {
135
+ pointerEvents: "none"
136
+ },
144
137
  onInput: (e) => handleInput(e, "max"),
145
138
  onChange: handleChange,
146
139
  onMouseup: handleRelease,
@@ -257,7 +250,7 @@ var sliderProps = {
257
250
  },
258
251
  color: {
259
252
  type: String,
260
- default: "sky.100"
253
+ default: ""
261
254
  },
262
255
  gradientColor: {
263
256
  type: Array,
@@ -283,6 +276,9 @@ var MpSlider = (0, import_vue3.defineComponent)({
283
276
  slots,
284
277
  emit
285
278
  }) {
279
+ const {
280
+ isNextTheme
281
+ } = (0, import_pixel3_utils2.usePixelTheme)();
286
282
  const {
287
283
  rootAttrs,
288
284
  labelWrapperAttrs,
@@ -311,24 +307,22 @@ var MpSlider = (0, import_vue3.defineComponent)({
311
307
  const maxSlots = slots.max && slots.max();
312
308
  const valueText = isRangeSlider.value ? `${minRangeValue.value} - ${maxRangeValue.value}` : currentValue.value;
313
309
  return (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createVNode)("div", labelWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
314
- "size": "label",
315
- "color": "dark"
310
+ "size": "label"
316
311
  }, {
317
312
  default: () => [label ? label : "Label"]
318
313
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
319
314
  "size": "label",
320
- "color": "dark",
321
315
  "weight": "semiBold"
322
316
  }, {
323
317
  default: () => [value ? value : valueText]
324
318
  })]), (0, import_vue2.createVNode)("div", sliderWrapperAttrs.value, [(0, import_vue2.createVNode)("div", progressAttrs.value, [(0, import_vue2.createVNode)("div", sliderAttrs.value, null)]), (0, import_vue2.createVNode)("div", inputWrapperAttrs.value, [(0, import_vue2.createVNode)("input", inputMinAttrs.value, null), isRangeSlider.value && (0, import_vue2.createVNode)("input", inputMaxAttrs.value, null)])]), (0, import_vue2.createVNode)("div", legendWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
325
319
  "size": "label-small",
326
- "color": "gray.600"
320
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
327
321
  }, {
328
322
  default: () => [minSlots ? minSlots : min]
329
323
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
330
324
  "size": "label-small",
331
- "color": "gray.600"
325
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
332
326
  }, {
333
327
  default: () => [maxSlots ? maxSlots : max]
334
328
  })])]);
package/dist/slider.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  MpSlider
3
- } from "./chunk-BEKWS6QE.mjs";
4
- import "./chunk-KTN7D244.mjs";
5
- import "./chunk-SXAHQ4O2.mjs";
3
+ } from "./chunk-T52MRHGI.mjs";
4
+ import "./chunk-NJDSOT4O.mjs";
5
+ import "./chunk-AX2E5DRG.mjs";
6
6
  import "./chunk-QZ7VFGWC.mjs";
7
7
  export {
8
8
  MpSlider
package/package.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "name": "@mekari/pixel3-slider",
3
3
  "description": "Slider component for mekari pixel 3",
4
- "version": "0.0.4",
4
+ "version": "0.0.5-dev.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
7
7
  "files": [
8
8
  "dist"
9
9
  ],
10
10
  "dependencies": {
11
- "@mekari/pixel3-styled-system": "0.1.1",
12
- "@mekari/pixel3-text": "0.0.15",
13
- "@mekari/pixel3-utils": "0.0.6"
11
+ "@mekari/pixel3-styled-system": "0.1.2-dev.0",
12
+ "@mekari/pixel3-text": "0.0.16-dev.0",
13
+ "@mekari/pixel3-utils": "0.0.7-dev.0"
14
14
  },
15
15
  "peerDependencies": {
16
16
  "vue": "^3.4.9"