@magicgol/polyjuice 0.34.0 → 0.34.3
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
|
@@ -2,11 +2,19 @@
|
|
|
2
2
|
<div
|
|
3
3
|
:class="classes"
|
|
4
4
|
>
|
|
5
|
+
<div
|
|
6
|
+
v-if="expanded"
|
|
7
|
+
class="mg-selection-box-curtain h-50 w-100 position-fixed"
|
|
8
|
+
@click="onClickOutside"
|
|
9
|
+
></div>
|
|
5
10
|
<div class="mg-selection-box-content fixed-bottom px-3 py-2">
|
|
6
|
-
<div class="bg-white rounded w-100 h-100 px-3 py-2">
|
|
11
|
+
<div class="d-flex flex-column bg-white rounded w-100 h-100 px-3 py-2">
|
|
7
12
|
<div class="mg-selection-box-title text-uppercase text-center"><slot></slot></div>
|
|
8
13
|
<div><slot name="summary"></slot></div>
|
|
9
|
-
<div
|
|
14
|
+
<div
|
|
15
|
+
class="flex-fill"
|
|
16
|
+
v-if="expanded"
|
|
17
|
+
><slot name="detail"></slot></div>
|
|
10
18
|
<div class="d-flex align-items-center mt-2">
|
|
11
19
|
<div class="w-50 text-center">
|
|
12
20
|
<slot name="cancel"></slot>
|
|
@@ -49,12 +57,23 @@ export default {
|
|
|
49
57
|
document.body.classList.remove('overflow-hidden');
|
|
50
58
|
}
|
|
51
59
|
}
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
methods: {
|
|
63
|
+
onClickOutside () {
|
|
64
|
+
this.$emit('click-outside');
|
|
65
|
+
}
|
|
52
66
|
}
|
|
53
67
|
};
|
|
54
68
|
</script>
|
|
55
69
|
|
|
56
70
|
<style lang="scss">
|
|
57
71
|
.mg-selection-box {
|
|
72
|
+
&-curtain {
|
|
73
|
+
left: 0;
|
|
74
|
+
top: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
58
77
|
&-shadow {
|
|
59
78
|
height: 7.5rem;
|
|
60
79
|
}
|
|
@@ -80,6 +99,10 @@ export default {
|
|
|
80
99
|
position: fixed;
|
|
81
100
|
top: 0;
|
|
82
101
|
width: 100%;
|
|
102
|
+
|
|
103
|
+
.mg-selection-box-content {
|
|
104
|
+
height: 50%;
|
|
105
|
+
}
|
|
83
106
|
}
|
|
84
107
|
}
|
|
85
108
|
</style>
|
|
@@ -4,8 +4,13 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
|
|
|
4
4
|
|
|
5
5
|
<ColorPalette>
|
|
6
6
|
<ColorItem
|
|
7
|
-
title="
|
|
7
|
+
title="Error"
|
|
8
8
|
subtitle="Used for error messages"
|
|
9
|
+
colors={{'Cinnabar': '#ed4949'}}
|
|
10
|
+
/>
|
|
11
|
+
<ColorItem
|
|
12
|
+
title="Warning"
|
|
13
|
+
subtitle="Used for warning messages"
|
|
9
14
|
colors={{'Persimmon': '#ff614c'}}
|
|
10
15
|
/>
|
|
11
16
|
<ColorItem
|