@radiantabyss/vue-components 1.5.3 → 1.5.4

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Form/RepeatableComponent.vue +41 -7
  3. package/src/Components/Form/ToggleComponent.vue +38 -1
  4. package/src/Sass/form-components/_toggle.scss +37 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radiantabyss/vue-components",
3
- "version": "1.5.3",
3
+ "version": "1.5.4",
4
4
  "author": "radiantabyss.com",
5
5
  "license": "ISC",
6
6
  "eslintConfig": {
package/src/Components/Form/RepeatableComponent.vue CHANGED
@@ -39,8 +39,10 @@ export default {
39
39
  }
40
40
  },
41
41
  methods: {
42
- add() {
42
+ async add() {
43
43
  let item = {};
44
+ let focus_input_type = null;
45
+
44
46
  for ( let input_name in this.inputs ) {
45
47
  let input = this.inputs[input_name];
46
48
 
@@ -48,12 +50,32 @@ export default {
48
50
  let options = input.options_are_grouped ? input.options[Object.keys(input.options)[0]] : input.options;
49
51
  item[input_name] = input.options_have_text ? Object.keys(options)[0] : options[0];
50
52
  }
53
+ else if ( input.type == 'toggle' ) {
54
+ item[input_name] = false;
55
+ }
51
56
  else {
52
57
  item[input_name] = '';
53
58
  }
59
+
60
+ if ( !focus_input_type && ['text', 'autocomplete'].includes(input.type) ) {
61
+ focus_input_type = input.type;
62
+ }
54
63
  }
55
64
 
56
65
  this.items.push(item);
66
+
67
+ if ( !focus_input_type ) {
68
+ return;
69
+ }
70
+
71
+ await this.$nextTick();
72
+
73
+ if ( focus_input_type == 'text' ) {
74
+ this.$refs[`text_${this.items.length - 1}`].focus();
75
+ }
76
+ else if ( focus_input_type == 'autocomplete' ) {
77
+ this.$refs[`autocomplete_${this.items.length - 1}`][0].$refs.input.focus();
78
+ }
57
79
  },
58
80
 
59
81
  remove(i) {
@@ -104,10 +126,11 @@ export default {
104
126
  <template>
105
127
  <div>
106
128
  <div class="grid" v-if="show_labels && items && items.length">
107
- <div v-for="(input, input_name) in inputs" :key="input_name">
108
- <div :class="input.input_css_class ? input.input_css_class : ''">{{ Str.ucwords(input_name) }}</div>
129
+ <div v-for="(input, input_name) in inputs" :key="input_name" :class="input.css_class ? input.css_class : ''">
130
+ {{ input.label ? input.label : Str.ucwords(input_name) }}
109
131
  </div>
110
- <div></div>
132
+ <div class="col-5"></div>
133
+ <div class="col-5"></div>
111
134
  </div>
112
135
 
113
136
  <Container @drop="sort" drag-handle-selector=".handle" v-if="items && items.length">
@@ -115,10 +138,11 @@ export default {
115
138
  <div class="grid items-center mb-10">
116
139
  <div class="col-5 font-12" v-if="show_numbers">{{ i + 1 }}. </div>
117
140
  <div v-for="(input, input_name) in inputs" :key="input_name" :class="input.css_class">
118
- <input type="text" class="input"
141
+ <input :type="input.input_type ? input.input_type : 'text'" class="input"
119
142
  :class="input.input_css_class ? input.input_css_class : ''"
120
143
  :key="`${input_name}_input`"
121
144
  :placeholder="input.placeholder"
145
+ :ref="`text_${i}`"
122
146
  v-model="item[input_name]"
123
147
  v-if="input.type == 'text'"
124
148
  />
@@ -158,8 +182,8 @@ export default {
158
182
 
159
183
  <autocomplete :key="`${input_name}_autocomplete`"
160
184
  :class="input.input_css_class ? input.input_css_class : ''"
161
- :text="value[i][input.text_key]"
162
- :domain="input.autocomplete_settings.domain"
185
+ :text="modelValue[i][input.text_key] || ''"
186
+ :domain="input.autocomplete_settings.domain || ''"
163
187
  :url="input.autocomplete_settings.url || ''"
164
188
  :limit="input.autocomplete_settings.limit || 20"
165
189
  :search_params="input.autocomplete_settings.search_params || {}"
@@ -168,9 +192,19 @@ export default {
168
192
  :autosearch_limit="input.autocomplete_settings.autosearch_limit || 10"
169
193
  :enable_modal="input.autocomplete_settings.enable_modal || false"
170
194
  :can_create="input.autocomplete_settings.can_create || false"
195
+ :ref="`autocomplete_${i}`"
171
196
  v-model="item[input_name]"
172
197
  v-else-if="input.type == 'autocomplete'"
173
198
  />
199
+
200
+ <toggle :class="input.input_css_class ? input.input_css_class : ''"
201
+ :key="`${input_name}_toggle`"
202
+ :text="input.text"
203
+ :on_text="input.on_text"
204
+ :off_text="input.off_text"
205
+ v-model="item[input_name]"
206
+ v-else-if="input.type == 'toggle'"
207
+ />
174
208
  </div>
175
209
 
176
210
  <div class="col-5">
package/src/Components/Form/ToggleComponent.vue CHANGED
@@ -11,6 +11,21 @@ export default {
11
11
  required: false,
12
12
  default: false,
13
13
  },
14
+ text: {
15
+ type: String,
16
+ required: false,
17
+ default: '',
18
+ },
19
+ on_text: {
20
+ type: String,
21
+ required: false,
22
+ default: '',
23
+ },
24
+ off_text: {
25
+ type: String,
26
+ required: false,
27
+ default: '',
28
+ },
14
29
  },
15
30
  emits: ['update:modelValue', 'change'],
16
31
  data() {
@@ -18,6 +33,17 @@ export default {
18
33
  checked: null,
19
34
  }
20
35
  },
36
+ computed: {
37
+ css_class() {
38
+ let css_class = this.disabled ? 'disabled' : '';
39
+
40
+ if ( this.text !== '' || this.on_text !== '' || this.off_text !== '' ) {
41
+ css_class += ' toggle--with-text';
42
+ }
43
+
44
+ return css_class;
45
+ },
46
+ },
21
47
  methods: {
22
48
  mount() {
23
49
  let checked = this.modelValue ? true : false;
@@ -45,8 +71,19 @@ export default {
45
71
  </script>
46
72
 
47
73
  <template>
48
- <label class="toggle" :class="disabled ? 'disabled' : ''" v-if="checked !== null">
74
+ <label class="toggle" :class="css_class" v-if="checked !== null">
49
75
  <input type="checkbox" ref="input" v-model="checked" @change="change">
50
76
  <span></span>
77
+ <p v-if="text !== '' || on_text !== '' || off_text !== ''">
78
+ <template v-if="text !== ''">
79
+ {{ text }}
80
+ </template>
81
+ <template v-else-if="checked">
82
+ {{ on_text }}
83
+ </template>
84
+ <template v-else>
85
+ {{ off_text }}
86
+ </template>
87
+ </p>
51
88
  </label>
52
89
  </template>
package/src/Sass/form-components/_toggle.scss CHANGED
@@ -8,20 +8,22 @@
8
8
  pointer-events: none;
9
9
 
10
10
  input:checked + span {
11
- background-color: lighten($green, 30%);
11
+ background-color: lighten($teal, 30%);
12
12
  }
13
13
  }
14
14
 
15
15
  input {
16
- opacity: 0;
16
+ position: absolute;
17
17
  width: 0;
18
18
  height: 0;
19
+ opacity: 0;
19
20
  }
20
21
 
21
22
  span {
22
23
  position: absolute;
23
24
  top: 0;
24
25
  left: 0;
26
+ z-index: 1;
25
27
  width: 100%;
26
28
  height: 100%;
27
29
  border-radius: 34px;
@@ -38,8 +40,10 @@
38
40
  content: "";
39
41
  display: block;
40
42
  position: absolute;
43
+ z-index: 2;
41
44
  left: 5px;
42
- top: 4px;
45
+ top: 50%;
46
+ transform: translateY(-50%);
43
47
  width: 14px;
44
48
  height: 14px;
45
49
  border-radius: 50%;
@@ -49,14 +53,41 @@
49
53
  }
50
54
 
51
55
  input:checked + span {
52
- background-color: $green;
56
+ background-color: $teal;
53
57
  }
54
58
 
55
59
  input:focus + span {
56
- box-shadow: 0 0 1px $green;
60
+ box-shadow: 0 0 1px $teal;
61
+ }
62
+
63
+ input:checked + span:before {
64
+ transform: translateX(17px) translateY(-50%);
65
+ }
66
+ }
67
+
68
+ .toggle--with-text {
69
+ width: auto;
70
+ height: auto;
71
+ padding: 4px 12px;
72
+ font-family: $font-accent;
73
+ font-size: 20px;
74
+
75
+ p {
76
+ display: inline-block;
77
+ position: relative;
78
+ z-index: 3;
79
+ margin: 0 0 0 12px;
80
+ pointer-events: none;
81
+ transition: 0.2s;
82
+ color: $text--dark;
57
83
  }
58
84
 
59
85
  input:checked + span:before {
60
- transform: translateX(17px);
86
+ left: calc(100% - 19px);
87
+ transform: translateY(-50%);
88
+ }
89
+
90
+ input:checked + span + p {
91
+ margin: 0 12px 0 0;
61
92
  }
62
93
  }