@mekari/pixel3-progress 0.0.16 → 0.0.17-dev.1
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.
- package/dist/{chunk-JAEHJFZL.mjs → chunk-HNKQHQH6.mjs} +41 -4
- package/dist/{chunk-XJ3CNKOI.mjs → chunk-XXR76U32.mjs} +2 -2
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +42 -5
- package/dist/index.mjs +3 -2
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/modules/progress.props.d.mts +3 -3
- package/dist/modules/progress.props.d.ts +3 -3
- package/dist/modules/progress.props.js +2 -2
- package/dist/modules/progress.props.mjs +1 -1
- package/dist/modules/progress.types.d.mts +6 -0
- package/dist/modules/progress.types.d.ts +6 -0
- package/dist/modules/{progress.type.js → progress.types.js} +3 -3
- package/dist/modules/progress.types.mjs +1 -0
- package/dist/progress.d.mts +7 -7
- package/dist/progress.d.ts +7 -7
- package/dist/progress.js +42 -5
- package/dist/progress.mjs +2 -2
- package/package.json +7 -6
- package/dist/modules/progress.type.d.mts +0 -4
- package/dist/modules/progress.type.d.ts +0 -4
- /package/dist/{modules/progress.type.mjs → chunk-RYCE5NBH.mjs} +0 -0
|
@@ -1,23 +1,59 @@
|
|
|
1
1
|
import {
|
|
2
2
|
__name,
|
|
3
3
|
progressProps
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-XXR76U32.mjs";
|
|
5
5
|
|
|
6
6
|
// src/progress.tsx
|
|
7
7
|
import { createVNode as _createVNode } from "vue";
|
|
8
8
|
import { defineComponent, computed } from "vue";
|
|
9
9
|
import { progressSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
|
|
10
10
|
import { token } from "@mekari/pixel3-styled-system/tokens";
|
|
11
|
+
import { usePixelTheme } from "@mekari/pixel3-utils";
|
|
11
12
|
var MpProgress = defineComponent({
|
|
12
13
|
name: "MpProgress",
|
|
13
14
|
props: progressProps,
|
|
14
15
|
setup(props) {
|
|
16
|
+
const {
|
|
17
|
+
isNextTheme
|
|
18
|
+
} = usePixelTheme();
|
|
15
19
|
const classes = computed(() => {
|
|
16
20
|
return progressSlotRecipe({
|
|
17
21
|
size: props.size,
|
|
18
22
|
variant: props.variant
|
|
19
23
|
});
|
|
20
24
|
});
|
|
25
|
+
const getColor = computed(() => {
|
|
26
|
+
const propColor = props.color || (isNextTheme.value ? "information" : "sky");
|
|
27
|
+
const colorMap = {
|
|
28
|
+
information: {
|
|
29
|
+
next: "background.brand.bold",
|
|
30
|
+
default: "sky.400"
|
|
31
|
+
},
|
|
32
|
+
positive: {
|
|
33
|
+
next: "background.success.bold",
|
|
34
|
+
default: "teal.400"
|
|
35
|
+
},
|
|
36
|
+
discovery: {
|
|
37
|
+
next: "background.highlight.bold",
|
|
38
|
+
default: "violet.400"
|
|
39
|
+
},
|
|
40
|
+
warning: {
|
|
41
|
+
next: "background.warning.bold",
|
|
42
|
+
default: "amber.400"
|
|
43
|
+
},
|
|
44
|
+
negative: {
|
|
45
|
+
next: "background.danger.bold",
|
|
46
|
+
default: "rose.400"
|
|
47
|
+
},
|
|
48
|
+
stone: {
|
|
49
|
+
next: "neutral.800",
|
|
50
|
+
default: "stone.400"
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
const colorConfig = colorMap[propColor];
|
|
54
|
+
const color = colorConfig ? isNextTheme.value ? colorConfig.next : colorConfig.default : `${propColor}.400`;
|
|
55
|
+
return token(`colors.${color}`);
|
|
56
|
+
});
|
|
21
57
|
const progressValue = /* @__PURE__ */ __name((val) => {
|
|
22
58
|
let value = Number(val);
|
|
23
59
|
if (value < 0)
|
|
@@ -32,9 +68,10 @@ var MpProgress = defineComponent({
|
|
|
32
68
|
return () => {
|
|
33
69
|
const {
|
|
34
70
|
value,
|
|
35
|
-
color,
|
|
36
71
|
background
|
|
37
72
|
} = props;
|
|
73
|
+
const propBackground = token(`colors.${background}`) || background;
|
|
74
|
+
const defaultPropBackground = token(`colors.${isNextTheme.value ? "background.stage" : "white"}`);
|
|
38
75
|
return _createVNode("div", {
|
|
39
76
|
"class": classes.value.root,
|
|
40
77
|
"data-pixel-component": "MpProgress",
|
|
@@ -43,8 +80,8 @@ var MpProgress = defineComponent({
|
|
|
43
80
|
"aria-valuemin": "0",
|
|
44
81
|
"aria-valuenow": value,
|
|
45
82
|
"style": {
|
|
46
|
-
"--mp-progress-color":
|
|
47
|
-
"--mp-progress-bg-color":
|
|
83
|
+
"--mp-progress-color": getColor.value,
|
|
84
|
+
"--mp-progress-bg-color": propBackground || defaultPropBackground,
|
|
48
85
|
"--mp-progress-width": progressValue(value)
|
|
49
86
|
}
|
|
50
87
|
}, [props.variant === "linear" && _createVNode("div", {
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { MpProgress } from './progress.mjs';
|
|
2
|
+
export { NextProgressType, ProgressSize, ProgressType, ProgressVariant } from './modules/progress.types.mjs';
|
|
2
3
|
import 'vue/jsx-runtime';
|
|
3
4
|
import '@mekari/pixel3-utils';
|
|
4
5
|
import 'vue';
|
|
5
|
-
import './modules/progress.type.mjs';
|
|
6
6
|
import '@mekari/pixel3-styled-system/tokens';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { MpProgress } from './progress.js';
|
|
2
|
+
export { NextProgressType, ProgressSize, ProgressType, ProgressVariant } from './modules/progress.types.js';
|
|
2
3
|
import 'vue/jsx-runtime';
|
|
3
4
|
import '@mekari/pixel3-utils';
|
|
4
5
|
import 'vue';
|
|
5
|
-
import './modules/progress.type.js';
|
|
6
6
|
import '@mekari/pixel3-styled-system/tokens';
|
package/dist/index.js
CHANGED
|
@@ -43,11 +43,11 @@ var progressProps = {
|
|
|
43
43
|
},
|
|
44
44
|
color: {
|
|
45
45
|
type: String,
|
|
46
|
-
default: "sky
|
|
46
|
+
default: "sky"
|
|
47
47
|
},
|
|
48
48
|
background: {
|
|
49
49
|
type: String,
|
|
50
|
-
default: "
|
|
50
|
+
default: ""
|
|
51
51
|
},
|
|
52
52
|
value: {
|
|
53
53
|
type: String,
|
|
@@ -56,16 +56,52 @@ var progressProps = {
|
|
|
56
56
|
};
|
|
57
57
|
|
|
58
58
|
// src/progress.tsx
|
|
59
|
+
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
59
60
|
var MpProgress = (0, import_vue2.defineComponent)({
|
|
60
61
|
name: "MpProgress",
|
|
61
62
|
props: progressProps,
|
|
62
63
|
setup(props) {
|
|
64
|
+
const {
|
|
65
|
+
isNextTheme
|
|
66
|
+
} = (0, import_pixel3_utils.usePixelTheme)();
|
|
63
67
|
const classes = (0, import_vue2.computed)(() => {
|
|
64
68
|
return (0, import_recipes.progressSlotRecipe)({
|
|
65
69
|
size: props.size,
|
|
66
70
|
variant: props.variant
|
|
67
71
|
});
|
|
68
72
|
});
|
|
73
|
+
const getColor = (0, import_vue2.computed)(() => {
|
|
74
|
+
const propColor = props.color || (isNextTheme.value ? "information" : "sky");
|
|
75
|
+
const colorMap = {
|
|
76
|
+
information: {
|
|
77
|
+
next: "background.brand.bold",
|
|
78
|
+
default: "sky.400"
|
|
79
|
+
},
|
|
80
|
+
positive: {
|
|
81
|
+
next: "background.success.bold",
|
|
82
|
+
default: "teal.400"
|
|
83
|
+
},
|
|
84
|
+
discovery: {
|
|
85
|
+
next: "background.highlight.bold",
|
|
86
|
+
default: "violet.400"
|
|
87
|
+
},
|
|
88
|
+
warning: {
|
|
89
|
+
next: "background.warning.bold",
|
|
90
|
+
default: "amber.400"
|
|
91
|
+
},
|
|
92
|
+
negative: {
|
|
93
|
+
next: "background.danger.bold",
|
|
94
|
+
default: "rose.400"
|
|
95
|
+
},
|
|
96
|
+
stone: {
|
|
97
|
+
next: "neutral.800",
|
|
98
|
+
default: "stone.400"
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
const colorConfig = colorMap[propColor];
|
|
102
|
+
const color = colorConfig ? isNextTheme.value ? colorConfig.next : colorConfig.default : `${propColor}.400`;
|
|
103
|
+
return (0, import_tokens.token)(`colors.${color}`);
|
|
104
|
+
});
|
|
69
105
|
const progressValue = /* @__PURE__ */ __name((val) => {
|
|
70
106
|
let value = Number(val);
|
|
71
107
|
if (value < 0)
|
|
@@ -80,9 +116,10 @@ var MpProgress = (0, import_vue2.defineComponent)({
|
|
|
80
116
|
return () => {
|
|
81
117
|
const {
|
|
82
118
|
value,
|
|
83
|
-
color,
|
|
84
119
|
background
|
|
85
120
|
} = props;
|
|
121
|
+
const propBackground = (0, import_tokens.token)(`colors.${background}`) || background;
|
|
122
|
+
const defaultPropBackground = (0, import_tokens.token)(`colors.${isNextTheme.value ? "background.stage" : "white"}`);
|
|
86
123
|
return (0, import_vue.createVNode)("div", {
|
|
87
124
|
"class": classes.value.root,
|
|
88
125
|
"data-pixel-component": "MpProgress",
|
|
@@ -91,8 +128,8 @@ var MpProgress = (0, import_vue2.defineComponent)({
|
|
|
91
128
|
"aria-valuemin": "0",
|
|
92
129
|
"aria-valuenow": value,
|
|
93
130
|
"style": {
|
|
94
|
-
"--mp-progress-color":
|
|
95
|
-
"--mp-progress-bg-color":
|
|
131
|
+
"--mp-progress-color": getColor.value,
|
|
132
|
+
"--mp-progress-bg-color": propBackground || defaultPropBackground,
|
|
96
133
|
"--mp-progress-width": progressValue(value)
|
|
97
134
|
}
|
|
98
135
|
}, [props.variant === "linear" && (0, import_vue.createVNode)("div", {
|
package/dist/index.mjs
CHANGED
package/dist/metafile-cjs.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/progress.props.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/modules/progress.props.ts":{"bytes":833,"imports":[],"format":"esm"},"src/progress.tsx":{"bytes":3274,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"src/modules/progress.props.ts","kind":"import-statement","original":"./modules/progress.props"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/progress.types.ts":{"bytes":368,"imports":[],"format":"esm"},"src/index.ts":{"bytes":167,"imports":[{"path":"src/progress.tsx","kind":"import-statement","original":"./progress"},{"path":"src/modules/progress.types.ts","kind":"import-statement","original":"./modules/progress.types"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":125},"src/progress.tsx":{"bytesInOutput":3107},"src/modules/progress.props.ts":{"bytesInOutput":292}},"bytes":4610},"dist/progress.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/progress.tsx","inputs":{"src/progress.tsx":{"bytesInOutput":3247},"src/modules/progress.props.ts":{"bytesInOutput":292}},"bytes":4608},"dist/modules/progress.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/progress.props.ts","inputs":{"src/modules/progress.props.ts":{"bytesInOutput":456}},"bytes":1396},"dist/modules/progress.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/progress.types.ts","inputs":{"src/modules/progress.types.ts":{"bytesInOutput":88}},"bytes":793}}}
|
package/dist/metafile-esm.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/progress.props.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/modules/progress.props.ts":{"bytes":833,"imports":[],"format":"esm"},"src/progress.tsx":{"bytes":3274,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"src/modules/progress.props.ts","kind":"import-statement","original":"./modules/progress.props"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/progress.types.ts":{"bytes":368,"imports":[],"format":"esm"},"src/index.ts":{"bytes":167,"imports":[{"path":"src/progress.tsx","kind":"import-statement","original":"./progress"},{"path":"src/modules/progress.types.ts","kind":"import-statement","original":"./modules/progress.types"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-HNKQHQH6.mjs","kind":"import-statement"},{"path":"dist/chunk-XXR76U32.mjs","kind":"import-statement"},{"path":"dist/chunk-RYCE5NBH.mjs","kind":"import-statement"}],"exports":["MpProgress"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":140},"dist/progress.mjs":{"imports":[{"path":"dist/chunk-HNKQHQH6.mjs","kind":"import-statement"},{"path":"dist/chunk-XXR76U32.mjs","kind":"import-statement"}],"exports":["MpProgress"],"entryPoint":"src/progress.tsx","inputs":{},"bytes":109},"dist/chunk-HNKQHQH6.mjs":{"imports":[{"path":"dist/chunk-XXR76U32.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["MpProgress"],"inputs":{"src/progress.tsx":{"bytesInOutput":2920}},"bytes":3033},"dist/modules/progress.props.mjs":{"imports":[{"path":"dist/chunk-XXR76U32.mjs","kind":"import-statement"}],"exports":["progressProps"],"entryPoint":"src/modules/progress.props.ts","inputs":{},"bytes":85},"dist/chunk-XXR76U32.mjs":{"imports":[],"exports":["__name","progressProps"],"inputs":{"src/modules/progress.props.ts":{"bytesInOutput":292}},"bytes":494},"dist/modules/progress.types.mjs":{"imports":[{"path":"dist/chunk-RYCE5NBH.mjs","kind":"import-statement"}],"exports":[],"entryPoint":"src/modules/progress.types.ts","inputs":{},"bytes":32},"dist/chunk-RYCE5NBH.mjs":{"imports":[],"exports":[],"inputs":{"src/modules/progress.types.ts":{"bytesInOutput":0}},"bytes":0}}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropType } from 'vue';
|
|
2
|
-
import { ProgressVariant, ProgressSize } from './progress.
|
|
2
|
+
import { ProgressVariant, ProgressSize } from './progress.types.mjs';
|
|
3
3
|
import { ColorToken } from '@mekari/pixel3-styled-system/tokens';
|
|
4
4
|
import { CombinedString } from '@mekari/pixel3-utils';
|
|
5
5
|
|
|
@@ -13,11 +13,11 @@ declare const progressProps: {
|
|
|
13
13
|
default: string;
|
|
14
14
|
};
|
|
15
15
|
color: {
|
|
16
|
-
type: PropType<
|
|
16
|
+
type: PropType<"sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
|
|
17
17
|
default: string;
|
|
18
18
|
};
|
|
19
19
|
background: {
|
|
20
|
-
type: PropType<
|
|
20
|
+
type: PropType<ColorToken | CombinedString>;
|
|
21
21
|
default: string;
|
|
22
22
|
};
|
|
23
23
|
value: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropType } from 'vue';
|
|
2
|
-
import { ProgressVariant, ProgressSize } from './progress.
|
|
2
|
+
import { ProgressVariant, ProgressSize } from './progress.types.js';
|
|
3
3
|
import { ColorToken } from '@mekari/pixel3-styled-system/tokens';
|
|
4
4
|
import { CombinedString } from '@mekari/pixel3-utils';
|
|
5
5
|
|
|
@@ -13,11 +13,11 @@ declare const progressProps: {
|
|
|
13
13
|
default: string;
|
|
14
14
|
};
|
|
15
15
|
color: {
|
|
16
|
-
type: PropType<
|
|
16
|
+
type: PropType<"sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
|
|
17
17
|
default: string;
|
|
18
18
|
};
|
|
19
19
|
background: {
|
|
20
|
-
type: PropType<
|
|
20
|
+
type: PropType<ColorToken | CombinedString>;
|
|
21
21
|
default: string;
|
|
22
22
|
};
|
|
23
23
|
value: {
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
type ProgressVariant = 'linear' | 'circular';
|
|
2
|
+
type ProgressSize = 'sm' | 'md';
|
|
3
|
+
type ProgressType = 'sky' | 'teal' | 'violet' | 'amber' | 'rose' | 'stone';
|
|
4
|
+
type NextProgressType = 'information' | 'positive' | 'discovery' | 'warning' | 'negative' | 'stone';
|
|
5
|
+
|
|
6
|
+
export { NextProgressType, ProgressSize, ProgressType, ProgressVariant };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
type ProgressVariant = 'linear' | 'circular';
|
|
2
|
+
type ProgressSize = 'sm' | 'md';
|
|
3
|
+
type ProgressType = 'sky' | 'teal' | 'violet' | 'amber' | 'rose' | 'stone';
|
|
4
|
+
type NextProgressType = 'information' | 'positive' | 'discovery' | 'warning' | 'negative' | 'stone';
|
|
5
|
+
|
|
6
|
+
export { NextProgressType, ProgressSize, ProgressType, ProgressVariant };
|
|
@@ -13,6 +13,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
13
13
|
};
|
|
14
14
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
15
|
|
|
16
|
-
// src/modules/progress.
|
|
17
|
-
var
|
|
18
|
-
module.exports = __toCommonJS(
|
|
16
|
+
// src/modules/progress.types.ts
|
|
17
|
+
var progress_types_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(progress_types_exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "../chunk-RYCE5NBH.mjs";
|
package/dist/progress.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as vue_jsx_runtime from 'vue/jsx-runtime';
|
|
2
2
|
import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
|
|
3
3
|
import * as vue from 'vue';
|
|
4
|
-
import { ProgressVariant, ProgressSize } from './modules/progress.
|
|
4
|
+
import { ProgressVariant, ProgressSize } from './modules/progress.types.mjs';
|
|
5
5
|
import { ColorToken } from '@mekari/pixel3-styled-system/tokens';
|
|
6
6
|
|
|
7
7
|
declare const MpProgress: vue.DefineComponent<{
|
|
@@ -14,11 +14,11 @@ declare const MpProgress: vue.DefineComponent<{
|
|
|
14
14
|
default: string;
|
|
15
15
|
};
|
|
16
16
|
color: {
|
|
17
|
-
type: vue.PropType<
|
|
17
|
+
type: vue.PropType<"sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
|
|
18
18
|
default: string;
|
|
19
19
|
};
|
|
20
20
|
background: {
|
|
21
|
-
type: vue.PropType<_mekari_pixel3_utils.CombinedString
|
|
21
|
+
type: vue.PropType<ColorToken | _mekari_pixel3_utils.CombinedString>;
|
|
22
22
|
default: string;
|
|
23
23
|
};
|
|
24
24
|
value: {
|
|
@@ -35,11 +35,11 @@ declare const MpProgress: vue.DefineComponent<{
|
|
|
35
35
|
default: string;
|
|
36
36
|
};
|
|
37
37
|
color: {
|
|
38
|
-
type: vue.PropType<
|
|
38
|
+
type: vue.PropType<"sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
|
|
39
39
|
default: string;
|
|
40
40
|
};
|
|
41
41
|
background: {
|
|
42
|
-
type: vue.PropType<_mekari_pixel3_utils.CombinedString
|
|
42
|
+
type: vue.PropType<ColorToken | _mekari_pixel3_utils.CombinedString>;
|
|
43
43
|
default: string;
|
|
44
44
|
};
|
|
45
45
|
value: {
|
|
@@ -47,10 +47,10 @@ declare const MpProgress: vue.DefineComponent<{
|
|
|
47
47
|
default: string;
|
|
48
48
|
};
|
|
49
49
|
}>>, {
|
|
50
|
-
background: _mekari_pixel3_utils.CombinedString
|
|
50
|
+
background: ColorToken | _mekari_pixel3_utils.CombinedString;
|
|
51
51
|
variant: ProgressVariant;
|
|
52
52
|
size: ProgressSize;
|
|
53
|
-
color:
|
|
53
|
+
color: "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative";
|
|
54
54
|
value: string;
|
|
55
55
|
}, {}>;
|
|
56
56
|
|
package/dist/progress.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as vue_jsx_runtime from 'vue/jsx-runtime';
|
|
2
2
|
import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
|
|
3
3
|
import * as vue from 'vue';
|
|
4
|
-
import { ProgressVariant, ProgressSize } from './modules/progress.
|
|
4
|
+
import { ProgressVariant, ProgressSize } from './modules/progress.types.js';
|
|
5
5
|
import { ColorToken } from '@mekari/pixel3-styled-system/tokens';
|
|
6
6
|
|
|
7
7
|
declare const MpProgress: vue.DefineComponent<{
|
|
@@ -14,11 +14,11 @@ declare const MpProgress: vue.DefineComponent<{
|
|
|
14
14
|
default: string;
|
|
15
15
|
};
|
|
16
16
|
color: {
|
|
17
|
-
type: vue.PropType<
|
|
17
|
+
type: vue.PropType<"sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
|
|
18
18
|
default: string;
|
|
19
19
|
};
|
|
20
20
|
background: {
|
|
21
|
-
type: vue.PropType<_mekari_pixel3_utils.CombinedString
|
|
21
|
+
type: vue.PropType<ColorToken | _mekari_pixel3_utils.CombinedString>;
|
|
22
22
|
default: string;
|
|
23
23
|
};
|
|
24
24
|
value: {
|
|
@@ -35,11 +35,11 @@ declare const MpProgress: vue.DefineComponent<{
|
|
|
35
35
|
default: string;
|
|
36
36
|
};
|
|
37
37
|
color: {
|
|
38
|
-
type: vue.PropType<
|
|
38
|
+
type: vue.PropType<"sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
|
|
39
39
|
default: string;
|
|
40
40
|
};
|
|
41
41
|
background: {
|
|
42
|
-
type: vue.PropType<_mekari_pixel3_utils.CombinedString
|
|
42
|
+
type: vue.PropType<ColorToken | _mekari_pixel3_utils.CombinedString>;
|
|
43
43
|
default: string;
|
|
44
44
|
};
|
|
45
45
|
value: {
|
|
@@ -47,10 +47,10 @@ declare const MpProgress: vue.DefineComponent<{
|
|
|
47
47
|
default: string;
|
|
48
48
|
};
|
|
49
49
|
}>>, {
|
|
50
|
-
background: _mekari_pixel3_utils.CombinedString
|
|
50
|
+
background: ColorToken | _mekari_pixel3_utils.CombinedString;
|
|
51
51
|
variant: ProgressVariant;
|
|
52
52
|
size: ProgressSize;
|
|
53
|
-
color:
|
|
53
|
+
color: "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative";
|
|
54
54
|
value: string;
|
|
55
55
|
}, {}>;
|
|
56
56
|
|
package/dist/progress.js
CHANGED
|
@@ -41,11 +41,11 @@ var progressProps = {
|
|
|
41
41
|
},
|
|
42
42
|
color: {
|
|
43
43
|
type: String,
|
|
44
|
-
default: "sky
|
|
44
|
+
default: "sky"
|
|
45
45
|
},
|
|
46
46
|
background: {
|
|
47
47
|
type: String,
|
|
48
|
-
default: "
|
|
48
|
+
default: ""
|
|
49
49
|
},
|
|
50
50
|
value: {
|
|
51
51
|
type: String,
|
|
@@ -54,16 +54,52 @@ var progressProps = {
|
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
// src/progress.tsx
|
|
57
|
+
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
57
58
|
var MpProgress = (0, import_vue2.defineComponent)({
|
|
58
59
|
name: "MpProgress",
|
|
59
60
|
props: progressProps,
|
|
60
61
|
setup(props) {
|
|
62
|
+
const {
|
|
63
|
+
isNextTheme
|
|
64
|
+
} = (0, import_pixel3_utils.usePixelTheme)();
|
|
61
65
|
const classes = (0, import_vue2.computed)(() => {
|
|
62
66
|
return (0, import_recipes.progressSlotRecipe)({
|
|
63
67
|
size: props.size,
|
|
64
68
|
variant: props.variant
|
|
65
69
|
});
|
|
66
70
|
});
|
|
71
|
+
const getColor = (0, import_vue2.computed)(() => {
|
|
72
|
+
const propColor = props.color || (isNextTheme.value ? "information" : "sky");
|
|
73
|
+
const colorMap = {
|
|
74
|
+
information: {
|
|
75
|
+
next: "background.brand.bold",
|
|
76
|
+
default: "sky.400"
|
|
77
|
+
},
|
|
78
|
+
positive: {
|
|
79
|
+
next: "background.success.bold",
|
|
80
|
+
default: "teal.400"
|
|
81
|
+
},
|
|
82
|
+
discovery: {
|
|
83
|
+
next: "background.highlight.bold",
|
|
84
|
+
default: "violet.400"
|
|
85
|
+
},
|
|
86
|
+
warning: {
|
|
87
|
+
next: "background.warning.bold",
|
|
88
|
+
default: "amber.400"
|
|
89
|
+
},
|
|
90
|
+
negative: {
|
|
91
|
+
next: "background.danger.bold",
|
|
92
|
+
default: "rose.400"
|
|
93
|
+
},
|
|
94
|
+
stone: {
|
|
95
|
+
next: "neutral.800",
|
|
96
|
+
default: "stone.400"
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
const colorConfig = colorMap[propColor];
|
|
100
|
+
const color = colorConfig ? isNextTheme.value ? colorConfig.next : colorConfig.default : `${propColor}.400`;
|
|
101
|
+
return (0, import_tokens.token)(`colors.${color}`);
|
|
102
|
+
});
|
|
67
103
|
const progressValue = /* @__PURE__ */ __name((val) => {
|
|
68
104
|
let value = Number(val);
|
|
69
105
|
if (value < 0)
|
|
@@ -78,9 +114,10 @@ var MpProgress = (0, import_vue2.defineComponent)({
|
|
|
78
114
|
return () => {
|
|
79
115
|
const {
|
|
80
116
|
value,
|
|
81
|
-
color,
|
|
82
117
|
background
|
|
83
118
|
} = props;
|
|
119
|
+
const propBackground = (0, import_tokens.token)(`colors.${background}`) || background;
|
|
120
|
+
const defaultPropBackground = (0, import_tokens.token)(`colors.${isNextTheme.value ? "background.stage" : "white"}`);
|
|
84
121
|
return (0, import_vue.createVNode)("div", {
|
|
85
122
|
"class": classes.value.root,
|
|
86
123
|
"data-pixel-component": "MpProgress",
|
|
@@ -89,8 +126,8 @@ var MpProgress = (0, import_vue2.defineComponent)({
|
|
|
89
126
|
"aria-valuemin": "0",
|
|
90
127
|
"aria-valuenow": value,
|
|
91
128
|
"style": {
|
|
92
|
-
"--mp-progress-color":
|
|
93
|
-
"--mp-progress-bg-color":
|
|
129
|
+
"--mp-progress-color": getColor.value,
|
|
130
|
+
"--mp-progress-bg-color": propBackground || defaultPropBackground,
|
|
94
131
|
"--mp-progress-width": progressValue(value)
|
|
95
132
|
}
|
|
96
133
|
}, [props.variant === "linear" && (0, import_vue.createVNode)("div", {
|
package/dist/progress.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mekari/pixel3-progress",
|
|
3
3
|
"description": "Progress component for mekari pixel 3",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.17-dev.1",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist"
|
|
9
9
|
],
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@mekari/pixel3-icon": "0.0.
|
|
12
|
-
"@mekari/pixel3-spinner": "0.0.
|
|
13
|
-
"@mekari/pixel3-styled-system": "0.1.1",
|
|
14
|
-
"@mekari/pixel3-utils": "0.0.
|
|
11
|
+
"@mekari/pixel3-icon": "0.0.17-dev.1",
|
|
12
|
+
"@mekari/pixel3-spinner": "0.0.17-dev.1",
|
|
13
|
+
"@mekari/pixel3-styled-system": "0.1.2-dev.1",
|
|
14
|
+
"@mekari/pixel3-utils": "0.0.7-dev.1"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"vue": "^3.4.9"
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
"build:types": "tsup src --dts-only",
|
|
39
39
|
"types:check": "tsc --noEmit",
|
|
40
40
|
"replace-config": "clean-package",
|
|
41
|
-
"restore-config": "clean-package restore"
|
|
41
|
+
"restore-config": "clean-package restore",
|
|
42
|
+
"types:vue": "vue-tsc --noEmit"
|
|
42
43
|
}
|
|
43
44
|
}
|
|
File without changes
|