toggle-components-library 1.14.2 → 1.16.0

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "toggle-components-library",
3
- "version": "1.14.2",
3
+ "version": "1.16.0",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -1,21 +1,23 @@
1
1
  <template>
2
2
  <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }">
3
3
 
4
- <div ref="colorpicker">
5
- <label class="toggle-input-label">{{label}}</label>
6
- <input :name="name" type="text" class="toggle-input-colour-picker toggle-input" v-model="colorValue" @input="updateFromInput" :style="'outline-color:'+borderColour"/>
7
- <span class="toggle-color-picker-current-color" :style="'background-color: ' + borderColour" @click="togglePicker()"></span>
4
+ <div class="color-picker-container" ref="colorpicker">
5
+ <div>
6
+ <label class="toggle-input-label">{{label}}</label>
7
+ <input :name="name" type="text" class="toggle-input-colour-picker toggle-input" v-model="colorValue" @input="updateFromInput" :style="'outline-color:'+borderColour"/>
8
+ <span class="toggle-color-picker-current-color" :style="'background-color: ' + borderColour" @click="togglePicker()"></span>
9
+ </div>
10
+
11
+ <chrome-picker class="toggle-chrome-picker" :value="colors" v-if="displayPicker" @input="updateFromPicker"/>
12
+
13
+ <label
14
+ class="toggle-input-label-error"
15
+ v-if="isInvalid"
16
+ :for="name ? name : 'ToggleInputText' "
17
+ >
18
+ {{ errorMessage }}
19
+ </label>
8
20
  </div>
9
-
10
- <chrome-picker class="toggle-chrome-picker" :value="colors" v-if="displayPicker" @input="updateFromPicker"/>
11
-
12
- <label
13
- class="toggle-input-label-error"
14
- v-if="isInvalid"
15
- :for="name ? name : 'ToggleInputText' "
16
- >
17
- {{ errorMessage }}
18
- </label>
19
21
  </div>
20
22
  </template>
21
23
 
@@ -167,7 +169,6 @@ export default {
167
169
  },
168
170
 
169
171
  documentClick(e) {
170
- console.log('fda');
171
172
  var el = this.$refs.colorpicker,
172
173
  target = e.target;
173
174
  if(el !== target && !el.contains(target)) {
@@ -48,6 +48,7 @@ export default {
48
48
  'Bodoni Moda',
49
49
  'EB Garamond',
50
50
  'Fredoka One',
51
+ 'Helvetica',
51
52
  'IBM Plex Mono',
52
53
  'Lato',
53
54
  'Libre Baskerville',
@@ -85,7 +85,6 @@ export default {
85
85
  width: 100%;
86
86
  display: flex;
87
87
  flex-direction: row;
88
- justify-content: space-between;
89
88
  column-gap: 0.875rem;
90
89
  }
91
90
  </style>
@@ -6,6 +6,7 @@
6
6
  display: flex;
7
7
  align-items: center;
8
8
  position:relative;
9
+ overflow-y: hidden;
9
10
  }
10
11
  .toggle-grid-input-row-preview{
11
12
  width: calc(100% - 8rem);
@@ -634,6 +634,7 @@ $iconWidth:20px;
634
634
  height: 2rem;
635
635
  width: 2rem;
636
636
  border-radius: 0% 50% 50% 0%;
637
+ margin-left: -5px;
637
638
  }
638
639
  .toggle-input-colour-picker {
639
640
  box-shadow: 0px 0px 1px $toggle-placeholder-grey;