@hulkapps/app-manager-vue 2.5.13 → 3.0.3
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/ArrowLeft.svg +14 -0
- package/dist/CheckFalse.svg +11 -0
- package/dist/CheckTrue.svg +11 -0
- package/dist/NavigationLeft.svg +12 -0
- package/dist/NavigationRight.svg +12 -0
- package/dist/app-manager-vue.esm.css +1 -0
- package/dist/app-manager-vue.esm.js +8799 -1619
- package/dist/app-manager-vue.min.css +1 -0
- package/dist/app-manager-vue.min.js +4 -4
- package/dist/app-manager-vue.ssr.css +1 -0
- package/dist/app-manager-vue.ssr.js +8256 -1582
- package/dist/cogsettings.svg +15 -0
- package/dist/hulkapps-app-manager.css +1 -1
- package/dist/hulkapps-app-manager.min.css +1 -1
- package/package.json +5 -1
- package/src/components/Plans/AppManagerPlan.vue +16 -3
- package/src/components/Plans/AppManagerSliderPlan.vue +940 -962
- package/src/components/PolarisNew/BundlePlanCard.vue +153 -0
- package/src/components/PolarisNew/CustomizationModal.vue +297 -0
- package/src/components/PolarisNew/GetCustomBlock.vue +93 -0
- package/src/components/PolarisNew/PlanCardsHighlights.vue +746 -0
- package/src/components/PolarisNew/PlanShowcaseBanner.vue +43 -19
- package/src/components/PolarisNew/PlanTable.vue +900 -0
- package/src/components/PolarisNew/SelectButton.vue +95 -0
- package/src/components/PolarisNew/ToggleButton.vue +92 -0
- package/src/components/PolarisNew/VariantButton.vue +134 -12
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export default {
|
|
3
|
+
name: "SelectButton",
|
|
4
|
+
props: {
|
|
5
|
+
variant: {
|
|
6
|
+
type: String,
|
|
7
|
+
required: true,
|
|
8
|
+
default() {
|
|
9
|
+
return "primary";
|
|
10
|
+
},
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
methods: {
|
|
14
|
+
handleClick() {
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
this.$emit("click", event);
|
|
17
|
+
},
|
|
18
|
+
handlePlanClick() {
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
this.$emit("plan-clicked", event);
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<a
|
|
28
|
+
@click="handleClick"
|
|
29
|
+
class="button"
|
|
30
|
+
:class="`button-${variant}`"
|
|
31
|
+
>
|
|
32
|
+
<slot></slot>
|
|
33
|
+
</a>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<style scoped>
|
|
37
|
+
.button {
|
|
38
|
+
display: flex;
|
|
39
|
+
width: fit-content !important;
|
|
40
|
+
height: 28px !important;
|
|
41
|
+
align-items: center !important;
|
|
42
|
+
padding: 4px 12px !important;
|
|
43
|
+
text-decoration: none !important;
|
|
44
|
+
font-size: 13px !important;
|
|
45
|
+
font-weight: 450 !important;
|
|
46
|
+
color: rgb(74, 74, 74) !important;
|
|
47
|
+
border-radius: 40px !important;
|
|
48
|
+
transition: all 0.3s !important;
|
|
49
|
+
}
|
|
50
|
+
.button:hover {
|
|
51
|
+
background-color: #0000000d !important;
|
|
52
|
+
border-radius: 8px !important;
|
|
53
|
+
}
|
|
54
|
+
.button-primary {
|
|
55
|
+
background-color: #3F3F3F !important;
|
|
56
|
+
color: #FAFAFA !important;
|
|
57
|
+
}
|
|
58
|
+
.button-primary:hover {
|
|
59
|
+
cursor: pointer !important;
|
|
60
|
+
background-color: rgba(0, 0, 0, 0.5) !important;
|
|
61
|
+
border-radius: 40px !important;
|
|
62
|
+
}
|
|
63
|
+
.button-secondary {
|
|
64
|
+
color: black !important;
|
|
65
|
+
background-color: none;
|
|
66
|
+
}
|
|
67
|
+
.button-secondary:hover {
|
|
68
|
+
cursor: pointer !important;
|
|
69
|
+
background-color: rgba(0, 0, 0, 0.08) !important;
|
|
70
|
+
border-radius: 40px !important;
|
|
71
|
+
}
|
|
72
|
+
.additional-info-primary {
|
|
73
|
+
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
74
|
+
color: #616161 !important;
|
|
75
|
+
padding: 0px 6px !important;
|
|
76
|
+
border-radius: 8px !important;
|
|
77
|
+
font-size: 13px !important;
|
|
78
|
+
font-weight: 550 !important;
|
|
79
|
+
}
|
|
80
|
+
.additional-info-secondary {
|
|
81
|
+
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
82
|
+
color: #616161 !important;
|
|
83
|
+
padding: 0px 6px !important;
|
|
84
|
+
border-radius: 8px !important;
|
|
85
|
+
font-weight: 550 !important;
|
|
86
|
+
}
|
|
87
|
+
.disabled {
|
|
88
|
+
background-color: rgba(0, 0, 0, 0.08) !important;
|
|
89
|
+
font-size: 13px !important;
|
|
90
|
+
font-weight: 450 !important;
|
|
91
|
+
color: rgb(74, 74, 74) !important;
|
|
92
|
+
cursor: not-allowed !important;
|
|
93
|
+
pointer-events: none !important;
|
|
94
|
+
}
|
|
95
|
+
</style>
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export default {
|
|
3
|
+
name: "ToggleButton",
|
|
4
|
+
props: {
|
|
5
|
+
toggled: {
|
|
6
|
+
type: Boolean,
|
|
7
|
+
required: true,
|
|
8
|
+
default() {
|
|
9
|
+
return false;
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
methods: {
|
|
14
|
+
handleClick() {
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
this.$emit("click", event);
|
|
17
|
+
},
|
|
18
|
+
handlePlanClick() {
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
this.$emit("plan-clicked", event);
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<a @click="handleClick" class="button" :class="{ 'is-toggled': toggled }">
|
|
28
|
+
<svg
|
|
29
|
+
width="18"
|
|
30
|
+
height="18"
|
|
31
|
+
viewBox="0 0 12 13"
|
|
32
|
+
fill="none"
|
|
33
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
+
>
|
|
35
|
+
<g clip-path="url(#clip0_855_6470)">
|
|
36
|
+
<path
|
|
37
|
+
d="M6.00512 1.50562C6.43112 1.50562 6.83912 1.67562 7.13862 1.97662L7.48762 2.32562C7.59992 2.43725 7.75178 2.49998 7.91012 2.50012H8.41012C8.83447 2.50012 9.24144 2.66869 9.54149 2.96874C9.84155 3.2688 10.0101 3.67577 10.0101 4.10012V4.60012C10.0101 4.75812 10.0731 4.91012 10.1836 5.02162L10.5326 5.37062C10.6821 5.51922 10.8007 5.69588 10.8816 5.89045C10.9626 6.08502 11.0043 6.29367 11.0044 6.50441C11.0045 6.71515 10.9629 6.92383 10.8822 7.11847C10.8014 7.31312 10.6829 7.48988 10.5336 7.63862L10.1846 7.98762C10.073 8.09991 10.0103 8.25177 10.0101 8.41012V8.91012C10.0101 9.33446 9.84155 9.74143 9.54149 10.0415C9.24144 10.3415 8.83447 10.5101 8.41012 10.5101H7.91012C7.75227 10.5103 7.60083 10.5726 7.48862 10.6836L7.13962 11.0326C6.99102 11.182 6.81436 11.3006 6.61979 11.3816C6.42522 11.4626 6.21657 11.5043 6.00583 11.5044C5.79509 11.5045 5.58641 11.4629 5.39177 11.3821C5.19712 11.3014 5.02036 11.1829 4.87162 11.0336L4.52262 10.6846C4.41033 10.573 4.25847 10.5103 4.10012 10.5101H3.60012C3.17578 10.5101 2.76881 10.3415 2.46875 10.0415C2.16869 9.74143 2.00012 9.33446 2.00012 8.91012V8.41012C1.99999 8.25226 1.93765 8.10082 1.82662 7.98862L1.47762 7.63962C1.3282 7.49101 1.2096 7.31435 1.12864 7.11978C1.04768 6.92521 1.00595 6.71656 1.00586 6.50582C1.00577 6.29508 1.04731 6.0864 1.12809 5.89176C1.20888 5.69711 1.32733 5.52035 1.47662 5.37162L1.82562 5.02262C1.93726 4.91032 1.99999 4.75846 2.00012 4.60012V4.10012L2.00262 4.00912C2.02586 3.60117 2.2043 3.21757 2.50134 2.93699C2.79838 2.6564 3.19152 2.50009 3.60012 2.50012H4.10012C4.25798 2.49998 4.40942 2.43764 4.52162 2.32662L4.87062 1.97762C5.01929 1.82806 5.19606 1.70937 5.39076 1.62836C5.58546 1.54736 5.79425 1.50565 6.00512 1.50562ZM7.25012 7.00012C7.05121 7.00012 6.86045 7.07913 6.71979 7.21979C6.57914 7.36044 6.50012 7.5512 6.50012 7.75012C6.50012 7.94903 6.57914 8.13979 6.71979 8.28045C6.86045 8.4211 7.05121 8.50012 7.25012 8.50012C7.44904 8.50012 7.6398 8.4211 7.78045 8.28045C7.92111 8.13979 8.00012 7.94903 8.00012 7.75012C8.00012 7.5512 7.92111 7.36044 7.78045 7.21979C7.6398 7.07913 7.44904 7.00012 7.25012 7.00012ZM7.85362 4.64662C7.75986 4.55288 7.63271 4.50022 7.50012 4.50022C7.36754 4.50022 7.24039 4.55288 7.14662 4.64662L4.14662 7.64662C4.05555 7.74092 4.00515 7.86722 4.00629 7.99832C4.00743 8.12941 4.06001 8.25482 4.15271 8.34752C4.24542 8.44023 4.37083 8.49281 4.50192 8.49395C4.63302 8.49509 4.75932 8.44469 4.85362 8.35362L7.85362 5.35362C7.94736 5.25985 8.00002 5.1327 8.00002 5.00012C8.00002 4.86753 7.94736 4.74038 7.85362 4.64662ZM4.75012 4.50012C4.55121 4.50012 4.36045 4.57913 4.21979 4.71979C4.07914 4.86044 4.00012 5.0512 4.00012 5.25012C4.00012 5.44903 4.07914 5.63979 4.21979 5.78045C4.36045 5.9211 4.55121 6.00012 4.75012 6.00012C4.94904 6.00012 5.1398 5.9211 5.28045 5.78045C5.42111 5.63979 5.50012 5.44903 5.50012 5.25012C5.50012 5.0512 5.42111 4.86044 5.28045 4.71979C5.1398 4.57913 4.94904 4.50012 4.75012 4.50012Z"
|
|
38
|
+
fill="black"
|
|
39
|
+
/>
|
|
40
|
+
</g>
|
|
41
|
+
<defs>
|
|
42
|
+
<clipPath id="clip0_855_6470">
|
|
43
|
+
<rect
|
|
44
|
+
width="12"
|
|
45
|
+
height="12"
|
|
46
|
+
fill="white"
|
|
47
|
+
transform="translate(0 0.5)"
|
|
48
|
+
/>
|
|
49
|
+
</clipPath>
|
|
50
|
+
</defs>
|
|
51
|
+
</svg>
|
|
52
|
+
|
|
53
|
+
<slot></slot>
|
|
54
|
+
</a>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<style scoped>
|
|
58
|
+
.button {
|
|
59
|
+
display: flex;
|
|
60
|
+
width: fit-content !important;
|
|
61
|
+
align-items: center !important;
|
|
62
|
+
gap: 3px !important;
|
|
63
|
+
padding: 10px 12px !important;
|
|
64
|
+
text-decoration: none !important;
|
|
65
|
+
font-size: 12px !important;
|
|
66
|
+
font-weight: 550 !important;
|
|
67
|
+
color: #303030 !important;
|
|
68
|
+
border-left: 1px solid #e3e3e3;
|
|
69
|
+
border-top: 1px solid #e3e3e3;
|
|
70
|
+
border-right: 1px solid #e3e3e3;
|
|
71
|
+
background-color: #ffffff !important;
|
|
72
|
+
border-radius: 8px !important;
|
|
73
|
+
transition: all 0.3s !important;
|
|
74
|
+
box-shadow:
|
|
75
|
+
#e3e3e3 0 1px 0 0 inset,
|
|
76
|
+
#e3e3e3 1px 0 0 0 inset,
|
|
77
|
+
#e3e3e3 -1px 0 0 0 inset,
|
|
78
|
+
#b5b5b5 0 -1px 0 0 inset;
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.button:hover,
|
|
83
|
+
.button.is-toggled {
|
|
84
|
+
background-color: #cccccc !important;
|
|
85
|
+
color: #303030 !important;
|
|
86
|
+
box-shadow:
|
|
87
|
+
#1a1a1a33 0 2px 1px 0 inset,
|
|
88
|
+
#1a1a1a1f 1px 0 1px 0 inset,
|
|
89
|
+
#1a1a1a1f -1px 0 1px 0 inset;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
</style>
|
|
@@ -26,13 +26,23 @@ export default {
|
|
|
26
26
|
required: false,
|
|
27
27
|
default: false,
|
|
28
28
|
},
|
|
29
|
+
fullWidth: {
|
|
30
|
+
type: Boolean,
|
|
31
|
+
required: false,
|
|
32
|
+
default: false,
|
|
33
|
+
},
|
|
34
|
+
loading: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
required: false,
|
|
37
|
+
default: false
|
|
38
|
+
}
|
|
29
39
|
},
|
|
30
40
|
methods: {
|
|
31
|
-
handleClick() {
|
|
41
|
+
handleClick(event) {
|
|
32
42
|
event.preventDefault();
|
|
33
43
|
this.$emit("click", event);
|
|
34
44
|
},
|
|
35
|
-
handlePlanClick() {
|
|
45
|
+
handlePlanClick(event) {
|
|
36
46
|
event.preventDefault();
|
|
37
47
|
this.$emit("plan-clicked", event);
|
|
38
48
|
},
|
|
@@ -50,11 +60,28 @@ export default {
|
|
|
50
60
|
href="#"
|
|
51
61
|
@click="handleClick"
|
|
52
62
|
class="button"
|
|
53
|
-
:class="
|
|
63
|
+
:class="[
|
|
64
|
+
`button-${variant}`,
|
|
65
|
+
{
|
|
66
|
+
'disabled': disabled,
|
|
67
|
+
'button-fullwidth': fullWidth,
|
|
68
|
+
'loading': loading
|
|
69
|
+
}
|
|
70
|
+
]"
|
|
54
71
|
>
|
|
55
|
-
<
|
|
72
|
+
<div v-if="loading" class="Polaris-Spinner Polaris-Spinner--sizeSmall">
|
|
73
|
+
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
74
|
+
<path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z" />
|
|
75
|
+
</svg>
|
|
76
|
+
</div>
|
|
77
|
+
<div :class="{ 'invisible': loading }">
|
|
78
|
+
<slot></slot>
|
|
79
|
+
</div>
|
|
56
80
|
<span
|
|
57
|
-
:class="
|
|
81
|
+
:class="[
|
|
82
|
+
`additional-info-${variant}`,
|
|
83
|
+
{ 'invisible': loading }
|
|
84
|
+
]"
|
|
58
85
|
v-if="additionalText"
|
|
59
86
|
>
|
|
60
87
|
{{ translateMe(additionalText) }}
|
|
@@ -66,6 +93,7 @@ export default {
|
|
|
66
93
|
.button {
|
|
67
94
|
display: flex;
|
|
68
95
|
width: fit-content !important;
|
|
96
|
+
justify-content: center;
|
|
69
97
|
height: 28px !important;
|
|
70
98
|
align-items: center !important;
|
|
71
99
|
gap: 8px !important;
|
|
@@ -73,23 +101,65 @@ export default {
|
|
|
73
101
|
text-decoration: none !important;
|
|
74
102
|
font-size: 13px !important;
|
|
75
103
|
font-weight: 450 !important;
|
|
76
|
-
color: rgb(74, 74, 74)
|
|
104
|
+
color: rgb(74, 74, 74);
|
|
105
|
+
position: relative;
|
|
77
106
|
}
|
|
107
|
+
|
|
78
108
|
.button:hover {
|
|
79
109
|
background-color: #0000000d !important;
|
|
80
110
|
border-radius: 8px !important;
|
|
81
111
|
}
|
|
112
|
+
|
|
82
113
|
.button-primary {
|
|
83
|
-
|
|
84
|
-
color: #303030
|
|
85
|
-
|
|
114
|
+
padding: 6px 12px;
|
|
115
|
+
background-color: #303030;
|
|
116
|
+
background-image: linear-gradient(
|
|
117
|
+
#30303000 63.53%,
|
|
118
|
+
#ffffff26
|
|
119
|
+
);
|
|
120
|
+
color: #ffffff;
|
|
121
|
+
border-bottom-color: #ffffff;
|
|
122
|
+
border-radius: 8px;
|
|
123
|
+
text-decoration: none;
|
|
124
|
+
font-size: 13px;
|
|
125
|
+
font-weight: 650;
|
|
126
|
+
box-shadow:
|
|
127
|
+
#000000cc 0 -1px 0 1px inset,
|
|
128
|
+
#303030 0 0 0 1px inset,
|
|
129
|
+
#ffffff40 0 0.5px 0 1.5px inset;
|
|
86
130
|
}
|
|
131
|
+
|
|
87
132
|
.button-primary:hover {
|
|
88
|
-
background-color:
|
|
133
|
+
background-color: #1a1a1a !important;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.button-primary:active,
|
|
137
|
+
.button-primary.disabled,
|
|
138
|
+
.button-secondary:active,
|
|
139
|
+
.button-secondary.disabled {
|
|
140
|
+
background-color: #cccccc !important;
|
|
141
|
+
box-shadow: 0 2px 1px 0 #1a1a1a33 inset;
|
|
89
142
|
}
|
|
143
|
+
|
|
90
144
|
.button-secondary {
|
|
91
|
-
color:
|
|
145
|
+
background-color: #ffffff !important;
|
|
146
|
+
color: #000000 !important;
|
|
147
|
+
border-radius: 8px !important;
|
|
148
|
+
box-shadow:
|
|
149
|
+
#e3e3e3 0 1px 0 0 inset,
|
|
150
|
+
#e3e3e3 1px 0 0 0 inset,
|
|
151
|
+
#e3e3e3 -1px 0 0 0 inset,
|
|
152
|
+
#b5b5b5 0 -1px 0 0 inset;
|
|
92
153
|
}
|
|
154
|
+
|
|
155
|
+
.button-secondary:hover {
|
|
156
|
+
background-color: #fafafa !important;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.button.button-fullwidth {
|
|
160
|
+
width: 100% !important;
|
|
161
|
+
}
|
|
162
|
+
|
|
93
163
|
.additional-info-primary {
|
|
94
164
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
95
165
|
color: #616161 !important;
|
|
@@ -98,6 +168,7 @@ export default {
|
|
|
98
168
|
font-size: 13px !important;
|
|
99
169
|
font-weight: 550 !important;
|
|
100
170
|
}
|
|
171
|
+
|
|
101
172
|
.additional-info-secondary {
|
|
102
173
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
103
174
|
color: #616161 !important;
|
|
@@ -105,12 +176,63 @@ export default {
|
|
|
105
176
|
border-radius: 8px !important;
|
|
106
177
|
font-weight: 550 !important;
|
|
107
178
|
}
|
|
179
|
+
|
|
108
180
|
.disabled {
|
|
109
|
-
background-color: rgba(0, 0, 0, 0.
|
|
181
|
+
background-color: rgba(0, 0, 0, 0.15) !important;
|
|
110
182
|
font-size: 13px !important;
|
|
111
183
|
font-weight: 450 !important;
|
|
112
184
|
color: rgb(74, 74, 74) !important;
|
|
113
185
|
cursor: not-allowed !important;
|
|
114
186
|
pointer-events: none !important;
|
|
115
187
|
}
|
|
188
|
+
|
|
189
|
+
.invisible {
|
|
190
|
+
visibility: hidden;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.loading {
|
|
194
|
+
cursor: wait !important;
|
|
195
|
+
position: relative;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.Polaris-Spinner {
|
|
199
|
+
animation: spin 1s linear infinite;
|
|
200
|
+
width: 20px;
|
|
201
|
+
height: 20px;
|
|
202
|
+
position: absolute;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.Polaris-Spinner svg {
|
|
206
|
+
fill: currentColor;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.button-primary .Polaris-Spinner svg {
|
|
210
|
+
fill: #ffffff;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.button-secondary .Polaris-Spinner svg {
|
|
214
|
+
fill: #000000;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
@keyframes spin {
|
|
218
|
+
0% {
|
|
219
|
+
transform: rotate(0deg);
|
|
220
|
+
}
|
|
221
|
+
100% {
|
|
222
|
+
transform: rotate(360deg);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.Polaris-Spinner {
|
|
227
|
+
animation: spin 500ms linear infinite, fade 320ms ease-in;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
@keyframes fade {
|
|
231
|
+
from {
|
|
232
|
+
opacity: 0;
|
|
233
|
+
}
|
|
234
|
+
to {
|
|
235
|
+
opacity: 1;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
116
238
|
</style>
|