forked from color-js/color.js
/
mapped-gradient.js
69 lines (61 loc) · 1.3 KB
/
mapped-gradient.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import methods from "./methods.js";
export default {
props: {
method: String | Object,
steps: Array,
},
emits: ["report-time"],
data () {
return {
time: 0,
mappedSteps: [],
};
},
computed: {
name () {
return methods[this.method]?.label || "None";
},
},
methods: {
mapSteps () {
const start = performance.now();
let steps = this.steps.map(step => {
let mappedColor;
if (this.method === "none") {
return step;
}
if (methods[this.method].compute) {
mappedColor = methods[this.method].compute(step);
}
else {
mappedColor = step.clone().toGamut({ space: "p3", method: this.method });
}
return mappedColor;
});
this.time = Color.util.toPrecision(performance.now() - start, 4);
this.$emit("report-time", {time: this.time, method: this.method});
this.mappedSteps = steps;
},
},
watch: {
steps: {
handler () {
this.mapSteps();
},
immediate: true,
},
},
compilerOptions: {
isCustomElement (tag) {
return tag === "css-color";
},
},
template: `
<div class="mapped-gradient">
<div class="info"><strong>{{ name }}</strong> {{time}}ms</div>
<div class="gradient" :title="name">
<div v-for="step in mappedSteps" :style="{'--step-color': step}" :title="name + ' ' + step"></div>
</div>
</div>
`,
};