@magicgol/polyjuice 0.34.0 → 0.34.1

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magicgol/polyjuice",
3
- "version": "0.34.0",
3
+ "version": "0.34.1",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
@@ -2,11 +2,15 @@
2
2
  <div
3
3
  :class="classes"
4
4
  >
5
+ <div
6
+ class="mg-selection-box-curtain h-50 w-100 position-fixed"
7
+ @click="onClickOutside"
8
+ ></div>
5
9
  <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">
10
+ <div class="d-flex flex-column bg-white rounded w-100 h-100 px-3 py-2">
7
11
  <div class="mg-selection-box-title text-uppercase text-center"><slot></slot></div>
8
12
  <div><slot name="summary"></slot></div>
9
- <div v-if="expanded"><slot name="detail"></slot></div>
13
+ <div class="flex-fill" v-if="expanded"><slot name="detail"></slot></div>
10
14
  <div class="d-flex align-items-center mt-2">
11
15
  <div class="w-50 text-center">
12
16
  <slot name="cancel"></slot>
@@ -49,12 +53,23 @@ export default {
49
53
  document.body.classList.remove('overflow-hidden');
50
54
  }
51
55
  }
56
+ },
57
+
58
+ methods: {
59
+ onClickOutside () {
60
+ this.$emit('click-outside');
61
+ }
52
62
  }
53
63
  };
54
64
  </script>
55
65
 
56
66
  <style lang="scss">
57
67
  .mg-selection-box {
68
+ &-curtain {
69
+ left: 0;
70
+ top: 0;
71
+ }
72
+
58
73
  &-shadow {
59
74
  height: 7.5rem;
60
75
  }
@@ -80,6 +95,10 @@ export default {
80
95
  position: fixed;
81
96
  top: 0;
82
97
  width: 100%;
98
+
99
+ .mg-selection-box-content {
100
+ height: 50%;
101
+ }
83
102
  }
84
103
  }
85
104
  </style>