@bagelink/vue 0.0.276 → 0.0.280

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 (20) hide show
  1. package/dist/components/ComboBox.vue.d.ts +2 -0
  2. package/dist/components/ComboBox.vue.d.ts.map +1 -1
  3. package/dist/components/form/inputs/CheckInput.vue.d.ts +9 -4
  4. package/dist/components/form/inputs/CheckInput.vue.d.ts.map +1 -1
  5. package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
  6. package/dist/index.cjs +44 -40
  7. package/dist/index.mjs +44 -40
  8. package/dist/plugins/modal.d.ts +1 -1
  9. package/dist/plugins/modal.d.ts.map +1 -1
  10. package/dist/style.css +444 -469
  11. package/package.json +1 -1
  12. package/src/components/ComboBox.vue +75 -69
  13. package/src/components/form/inputs/CheckInput.vue +55 -53
  14. package/src/components/form/inputs/SelectInput.vue +272 -284
  15. package/src/components/formkit/Toggle.vue +85 -100
  16. package/src/plugins/modal.ts +23 -23
  17. package/src/styles/buttons.css +38 -40
  18. package/src/styles/inputs.css +100 -109
  19. package/src/styles/layout.css +0 -1
  20. package/src/styles/text.css +0 -21
package/src/styles/inputs.css CHANGED
@@ -1,221 +1,212 @@
1
1
  input,
2
2
  textarea,
3
3
  select {
4
- font-family: inherit;
5
- width: 100%;
4
+ font-family: inherit;
5
+ width: 100%;
6
6
  }
7
7
 
8
8
  .bagel-input {
9
- position: relative;
10
- display: flex;
11
- flex-direction: column;
12
- text-align: start;
13
- margin-bottom: 0.5rem;
14
- width: 100%;
15
- color: var(--bgl-black);
9
+ position: relative;
10
+ display: flex;
11
+ flex-direction: column;
12
+ text-align: start;
13
+ margin-bottom: 0.5rem;
14
+ width: 100%;
15
+ color: var(--bgl-black);
16
16
  }
17
17
 
18
18
  .bagel-input::placeholder .bagel-input label {
19
- display: block;
20
- font-size: var(--label-font-size);
21
- margin-bottom: 2px;
22
- line-height: 1.3;
19
+ display: block;
20
+ font-size: var(--label-font-size);
21
+ margin-bottom: 2px;
22
+ line-height: 1.3;
23
23
  }
24
24
 
25
25
  .bagel-input::placeholder {
26
- color: var(--placeholder-color);
26
+ color: var(--placeholder-color);
27
27
  }
28
28
 
29
29
  .bagel-input label {
30
- color: var(--label-color);
30
+ color: var(--label-color);
31
31
  }
32
32
 
33
33
  .bagel-input input,
34
34
  .bagel-input select,
35
35
  .custom-select .input {
36
- height: var(--input-height);
37
- font-size: var(--input-font-size);
36
+ height: var(--input-height);
37
+ font-size: var(--input-font-size);
38
38
  }
39
39
 
40
40
  .bagel-input input,
41
41
  .bagel-input textarea,
42
42
  .bagel-input select,
43
43
  .custom-select .input {
44
- background: var(--input-bg);
45
- border: none;
46
- padding: 0.7rem;
47
- border-radius: var(--input-border-radius);
48
- color: var(--input-color);
49
- min-width: calc(var(--input-height) * 3);
50
- width: 100%;
44
+ background: var(--input-bg);
45
+ border: none;
46
+ padding: 0.7rem;
47
+ border-radius: var(--input-border-radius);
48
+ color: var(--input-color);
49
+ min-width: calc(var(--input-height) * 3);
50
+ width: 100%;
51
51
  }
52
52
 
53
53
  .bagel-input input::placeholder,
54
54
  .bagel-input textarea::placeholder,
55
55
  .bagel-input select::placeholder,
56
56
  .custom-select .input::placeholder {
57
- color: var(--placeholder-color);
57
+ color: var(--placeholder-color);
58
58
  }
59
59
 
60
60
  .bagel-input.search-wrap {
61
- display: flex;
62
- flex-direction: row;
63
- align-items: center;
61
+ display: flex;
62
+ flex-direction: row;
63
+ align-items: center;
64
64
  }
65
65
 
66
66
  .bagel-input.search-wrap input {
67
- padding-inline-end: 2rem;
67
+ padding-inline-end: 2rem;
68
68
  }
69
69
 
70
70
  .bagel-input.search-wrap .bgl_icon-font {
71
- margin-inline-start: -1.75rem;
71
+ margin-inline-start: -1.75rem;
72
72
  }
73
73
 
74
74
  .bagel-input select {
75
- height: var(--input-height);
75
+ height: var(--input-height);
76
76
  }
77
77
 
78
78
  .bagel-input textarea {
79
- resize: vertical;
80
- min-height: calc(var(--input-height) * 3);
81
- line-height: 1.5;
79
+ resize: vertical;
80
+ min-height: calc(var(--input-height) * 3);
81
+ line-height: 1.5;
82
82
  }
83
83
 
84
84
  .bagel-input.wider input {
85
- min-width: 320px;
85
+ min-width: 320px;
86
86
  }
87
87
 
88
88
  .bagel-input input[type="radio"] {
89
- padding: 0;
90
- width: fit-content;
89
+ padding: 0;
90
+ width: fit-content;
91
91
  }
92
92
 
93
93
  .bagel-input:focus-within label {
94
- color: var(--bgl-primary);
94
+ color: var(--bgl-primary);
95
95
  }
96
96
 
97
97
  .bagel-input select.no-edit,
98
98
  .bagel-input input.no-edit,
99
99
  .bagel-input textarea.no-edit,
100
100
  .bagel-input .switch.no-edit {
101
- pointer-events: none;
102
- outline: none;
101
+ pointer-events: none;
102
+ outline: none;
103
103
  }
104
104
 
105
- input[type="number"]::-webkit-inner-spin-button,
106
- input[type="number"]::-webkit-outer-spin-button {
107
- -webkit-appearance: none;
108
- }
109
-
110
- label.active {
111
- color: var(--bgl-primary);
105
+ .bagel-input label.active {
106
+ color: var(--bgl-primary);
112
107
  }
113
108
 
114
109
  .inline-80 {
115
- display: inline-block;
116
- width: 80%;
110
+ display: inline-block;
111
+ width: 80%;
117
112
  }
118
113
 
119
114
  .inline-20 {
120
- display: inline-block;
121
- width: 20%;
115
+ display: inline-block;
116
+ width: 20%;
122
117
  }
123
118
 
124
119
  .inline-10 {
125
- display: inline-block;
126
- width: 20%;
120
+ display: inline-block;
121
+ width: 20%;
127
122
  }
128
123
 
129
124
  .inline-50 {
130
- display: inline-block;
131
- width: 49%;
132
- margin: 0 0.5%;
125
+ display: inline-block;
126
+ width: 49%;
127
+ margin: 0 0.5%;
133
128
  }
134
129
 
135
130
  .custom-select .input {
136
- height: var(--input-height);
137
- font-size: var(--input-font-size);
131
+ height: var(--input-height);
132
+ font-size: var(--input-font-size);
138
133
  }
139
134
 
140
135
  .custom-select .input {
141
- background: var(--input-bg);
142
- border: none;
143
- padding: 0.7rem;
144
- border-radius: var(--input-border-radius);
145
- color: var(--input-color);
146
- min-width: calc(var(--input-height) * 3);
147
- width: 100%;
136
+ background: var(--input-bg);
137
+ border: none;
138
+ padding: 0.7rem;
139
+ border-radius: var(--input-border-radius);
140
+ color: var(--input-color);
141
+ min-width: calc(var(--input-height) * 3);
142
+ width: 100%;
148
143
  }
149
144
 
150
145
  .input.active,
151
146
  .bagel-input input:focus-visible,
152
147
  .bagel-input select:focus-visible,
153
148
  .bagel-input textarea:focus-visible {
154
- outline: none;
155
- box-shadow: inset 0 0 10px #00000012;
156
- }
157
-
158
- input[type="number"]::-webkit-inner-spin-button,
159
- input[type="number"]::-webkit-outer-spin-button {
160
- -webkit-appearance: none;
149
+ outline: none;
150
+ box-shadow: inset 0 0 10px #00000012;
161
151
  }
162
152
 
163
- label.active {
164
- color: var(--bgl-primary);
153
+ .bagel-input input[type="number"]::-webkit-inner-spin-button,
154
+ .bagel-input input[type="number"]::-webkit-outer-spin-button {
155
+ -webkit-appearance: none;
165
156
  }
166
157
 
167
158
  .label-count-0 label {
168
- display: none;
159
+ display: none;
169
160
  }
170
161
 
171
162
  .label-count-0 button.bgl_btn.bgl_flatBtn {
172
- /* background: var(--bgl-blue-light); */
173
- margin-right: 5px;
163
+ /* background: var(--bgl-blue-light); */
164
+ margin-right: 5px;
174
165
  }
175
166
 
176
167
  .label-count-0 button.bgl_btn.bgl_flatBtn:hover {
177
- background: var(--bgl-hover-filter);
168
+ background: var(--bgl-hover-filter);
178
169
  }
179
170
 
180
- input[type="color"] {
181
- padding: 0.025rem 0.05rem;
182
- display: block;
183
- width: var(--input-height);
184
- height: var(--input-height);
185
- border: none;
186
- -webkit-appearance: none;
187
- -moz-appearance: none;
188
- appearance: none;
189
- cursor: pointer;
171
+ .bagel-input input[type="color"] {
172
+ padding: 0.025rem 0.05rem;
173
+ display: block;
174
+ width: var(--input-height);
175
+ height: var(--input-height);
176
+ border: none;
177
+ -webkit-appearance: none;
178
+ -moz-appearance: none;
179
+ appearance: none;
180
+ cursor: pointer;
190
181
  }
191
182
 
192
- input[type="color"]::-webkit-color-swatch {
193
- border-radius: var(--input-border-radius);
194
- border: none;
195
- transition: box-shadow 200ms ease;
183
+ .bagel-input input[type="color"]::-webkit-color-swatch {
184
+ border-radius: var(--input-border-radius);
185
+ border: none;
186
+ transition: box-shadow 200ms ease;
196
187
  }
197
188
 
198
- input[type="color"]::-moz-color-swatch {
199
- border-radius: var(--input-border-radius);
200
- border: none;
201
- transition: box-shadow 200ms ease;
189
+ .bagel-input input[type="color"]::-moz-color-swatch {
190
+ border-radius: var(--input-border-radius);
191
+ border: none;
192
+ transition: box-shadow 200ms ease;
202
193
  }
203
194
 
204
- input[type="color"]::-webkit-color-swatch:hover {
205
- box-shadow: inset 0 0 10px #00000050;
195
+ .bagel-input input[type="color"]::-webkit-color-swatch:hover {
196
+ box-shadow: inset 0 0 10px #00000050;
206
197
  }
207
198
 
208
- input[type="color"]::-moz-color-swatch:hover {
209
- box-shadow: inset 0 0 10px #00000050;
199
+ .bagel-input input[type="color"]::-moz-color-swatch:hover {
200
+ box-shadow: inset 0 0 10px #00000050;
210
201
  }
211
202
 
212
203
  @media screen and (max-width: 910px) {
213
- .bagel-input.wider input {
214
- min-width: 120px;
215
- }
216
-
217
- .bagel-input label {
218
- font-size: calc(var(--input-font-size) / 1.1);
219
- line-height: 1.2;
220
- }
221
- }
204
+ .bagel-input.wider input {
205
+ min-width: 120px;
206
+ }
207
+
208
+ .bagel-input label {
209
+ font-size: calc(var(--input-font-size) / 1.1);
210
+ line-height: 1.2;
211
+ }
212
+ }
package/src/styles/layout.css CHANGED
@@ -685,7 +685,6 @@
685
685
  justify-content: space-between;
686
686
  }
687
687
 
688
- label,
689
688
  .label {
690
689
  display: block;
691
690
  font-size: var(--label-font-size);
package/src/styles/text.css CHANGED
@@ -1,24 +1,3 @@
1
- /* h1,
2
- h2,
3
- h3,
4
- h4,
5
- h5,
6
- h6 {
7
- width: max-content;
8
- }
9
-
10
- h1 {}
11
-
12
- h2 {}
13
-
14
- h3 {}
15
-
16
- h4 {}
17
-
18
- h5 {}
19
-
20
- h6 {} */
21
-
22
1
  .txt-center {
23
2
  text-align: center;
24
3
  }