@bagelink/vue 0.0.276 → 0.0.282

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 +25 -17
  7. package/dist/index.mjs +25 -17
  8. package/dist/plugins/modal.d.ts +1 -1
  9. package/dist/plugins/modal.d.ts.map +1 -1
  10. package/dist/style.css +861 -641
  11. package/package.json +1 -1
  12. package/src/components/ComboBox.vue +15 -10
  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 +13 -3
  18. package/src/styles/inputs.css +100 -109
  19. package/src/styles/layout.css +449 -191
  20. package/src/styles/text.css +80 -59
package/src/components/formkit/Toggle.vue CHANGED
@@ -1,164 +1,149 @@
1
1
  <template>
2
- <div
3
- class="bagel-input checkbox"
4
- :class="{ check: context?.attrs.isCheckbox }"
5
- :title="context?.help"
6
- >
2
+ <div class="bagel-input checkbox" :title="label">
7
3
  <label class="switch">
8
- <input
9
- @change="() => props.context?.node.input(inputVal)"
10
- type="checkbox"
11
- v-model="inputVal"
12
- :id="context?.id"
13
- >
4
+ <input type="checkbox" v-model="inputVal" :id="id">
14
5
  <span class="slider round" />
15
6
  </label>
16
7
  </div>
17
8
  </template>
18
9
 
19
10
  <script setup lang="ts">
20
- import { watch } from 'vue';
21
-
22
- const props = defineProps({
23
- context: Object,
11
+ defineProps<{
12
+ helpText?: string;
13
+ id: string;
14
+ label?: string;
15
+ }>();
16
+ const inputVal = defineModel('modelValue', {
17
+ type: Boolean,
18
+ default: false,
24
19
  });
25
-
26
- let inputVal = $ref(false);
27
-
28
- watch(
29
- () => props.context?.value,
30
- (newVal) => {
31
- inputVal = newVal;
32
- },
33
- { immediate: true },
34
- );
35
20
  </script>
36
21
 
37
22
  <style>
38
23
  .checkbox-label {
39
- display: flex;
40
- gap: 0.5rem;
41
- flex-direction: row-reverse;
42
- justify-content: flex-end;
43
- align-items: center;
44
- cursor: pointer;
24
+ display: flex;
25
+ gap: 0.5rem;
26
+ flex-direction: row-reverse;
27
+ justify-content: flex-end;
28
+ align-items: center;
29
+ cursor: pointer;
45
30
  }
46
31
  </style>
47
32
 
48
33
  <style scoped>
49
34
  .no-edit {
50
- pointer-events: none;
35
+ pointer-events: none;
51
36
  }
52
37
 
53
38
  .radio-wrap p {
54
- display: inline-block;
55
- color: var(--input-bg);
56
- font-size: var(--input-font-size);
57
- margin-inline-end: 10px;
39
+ display: inline-block;
40
+ color: var(--input-bg);
41
+ font-size: var(--input-font-size);
42
+ margin-inline-end: 10px;
58
43
  }
59
44
 
60
45
  .radio-wrap label {
61
- padding: 3px 5px;
62
- display: inline-block;
63
- border-radius: var(--input-border-radius);
64
- font-size: var(--input-font-size);
65
- background: var(--input-bg);
66
- color: var(--bgl-black);
67
- text-align: center;
68
- margin: 8px 5px;
69
- cursor: pointer;
70
- user-select: none;
46
+ padding: 3px 5px;
47
+ display: inline-block;
48
+ border-radius: var(--input-border-radius);
49
+ font-size: var(--input-font-size);
50
+ background: var(--input-bg);
51
+ color: var(--bgl-black);
52
+ text-align: center;
53
+ margin: 8px 5px;
54
+ cursor: pointer;
55
+ user-select: none;
71
56
  }
72
57
 
73
58
  .bagel-input .radio-wrap label::after {
74
- background: transparent;
59
+ background: transparent;
75
60
  }
76
61
 
77
62
  .radio-wrap input {
78
- display: none;
63
+ display: none;
79
64
  }
80
65
 
81
- .radio-wrap input:checked:checked + label {
82
- background: var(--bgl-primary);
83
- color: var(--bgl-white);
66
+ .radio-wrap input:checked:checked+label {
67
+ background: var(--bgl-primary);
68
+ color: var(--bgl-white);
84
69
  }
85
70
 
86
71
  .checkbox {
87
- position: relative;
72
+ position: relative;
88
73
  }
89
74
 
90
75
  .switch {
91
- position: relative;
92
- display: inline-block;
93
- height: calc(var(--input-height) / 2);
94
- width: var(--input-height);
95
- border-radius: var(--input-height);
76
+ position: relative;
77
+ display: inline-block;
78
+ height: calc(var(--input-height) / 2);
79
+ width: var(--input-height);
80
+ border-radius: var(--input-height);
96
81
  }
97
82
 
98
83
  .switch input {
99
- opacity: 0;
100
- width: 0;
101
- height: 0;
84
+ opacity: 0;
85
+ width: 0;
86
+ height: 0;
102
87
  }
103
88
 
104
89
  .bagel-input.checkbox.check {
105
- margin: 0;
90
+ margin: 0;
106
91
  }
107
92
 
108
93
  .bagel-input.checkbox.check .switch {
109
- width: calc(var(--input-height) / 2);
110
- height: calc(var(--input-height) / 2);
111
- transition: 0.2s;
94
+ width: calc(var(--input-height) / 2);
95
+ height: calc(var(--input-height) / 2);
96
+ transition: 0.2s;
112
97
  }
113
98
 
114
99
  .bagel-input.checkbox.check .slider:before {
115
- position: absolute;
116
- font-family: "Material Symbols Outlined", serif;
117
- content: "";
118
- color: var(--bgl-white);
119
- background: transparent;
120
- display: flex;
121
- align-items: center;
122
- justify-content: center;
100
+ position: absolute;
101
+ font-family: "Material Symbols Outlined", serif;
102
+ content: "";
103
+ color: var(--bgl-white);
104
+ background: transparent;
105
+ display: flex;
106
+ align-items: center;
107
+ justify-content: center;
123
108
  }
124
109
 
125
- .bagel-input.checkbox.check input:checked + .slider:before {
126
- transform: none;
127
- content: "check";
110
+ .bagel-input.checkbox.check input:checked+.slider:before {
111
+ transform: none;
112
+ content: "check";
128
113
  }
129
114
 
130
115
  .slider {
131
- position: absolute;
132
- cursor: pointer;
133
- top: 0;
134
- left: 0;
135
- right: 0;
136
- bottom: 0;
137
- background: var(--input-bg);
138
- -webkit-transition: 0.4s;
139
- transition: 0.4s;
140
- border-radius: calc(var(--input-height) / 2);
141
- box-shadow: inset 0 0 10px #00000020;
116
+ position: absolute;
117
+ cursor: pointer;
118
+ top: 0;
119
+ left: 0;
120
+ right: 0;
121
+ bottom: 0;
122
+ background: var(--input-bg);
123
+ -webkit-transition: 0.4s;
124
+ transition: 0.4s;
125
+ border-radius: calc(var(--input-height) / 2);
126
+ box-shadow: inset 0 0 10px #00000020;
142
127
  }
143
128
 
144
129
  .slider:before {
145
- position: absolute;
146
- content: "";
147
- height: calc(var(--input-height) / 2 - 4px);
148
- width: calc(var(--input-height) / 2 - 4px);
149
- left: 2px;
150
- bottom: 2px;
151
- border-radius: 50%;
152
- background: var(--bgl-white);
153
- -webkit-transition: 0.4s;
154
- transition: 0.4s;
130
+ position: absolute;
131
+ content: "";
132
+ height: calc(var(--input-height) / 2 - 4px);
133
+ width: calc(var(--input-height) / 2 - 4px);
134
+ left: 2px;
135
+ bottom: 2px;
136
+ border-radius: 50%;
137
+ background: var(--bgl-white);
138
+ -webkit-transition: 0.4s;
139
+ transition: 0.4s;
155
140
  }
156
141
 
157
- input:checked + .slider {
158
- background: var(--bgl-primary);
142
+ input:checked+.slider {
143
+ background: var(--bgl-primary);
159
144
  }
160
145
 
161
- input:checked + .slider:before {
162
- transform: translateX(calc(var(--input-height) / 2));
146
+ input:checked+.slider:before {
147
+ transform: translateX(calc(var(--input-height) / 2));
163
148
  }
164
149
  </style>
package/src/plugins/modal.ts CHANGED
@@ -6,39 +6,39 @@ import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
6
6
  import { Modal, ModalForm } from '@bagelink/vue';
7
7
 
8
8
  export interface ModalOptions {
9
- title?: string;
10
- dismissable?: boolean;
11
- side?: boolean;
12
- actions?: BtnOptions[];
13
- class?: string;
9
+ title?: string;
10
+ dismissable?: boolean;
11
+ side?: boolean;
12
+ actions?: BtnOptions[];
13
+ class?: string;
14
14
  }
15
15
 
16
16
  export interface ModalFormOptions {
17
- side?: boolean;
18
- title?: string;
19
- dismissable?: boolean;
20
- schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
21
- onSubmit?: (formData: any) => Promise<any>;
22
- onDelete?: (id: string) => Promise<void>;
23
- onError?: ((err: any) => void);
24
- modelValue?: Record<string, any>;
25
- 'onUpdate:modelValue'?: (val: any) => void;
17
+ side?: boolean;
18
+ title?: string;
19
+ dismissable?: boolean;
20
+ schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
21
+ onSubmit?: (formData: any) => Promise<void>;
22
+ onDelete?: (id: string) => Promise<void>;
23
+ onError?: ((err: any) => void);
24
+ modelValue?: Record<string, any>;
25
+ 'onUpdate:modelValue'?: (val: any) => void;
26
26
  }
27
27
 
28
28
  export interface ModalComponentProps {
29
- componentSlots: Record<string, any>,
30
- modalType: 'modal' | 'modalForm',
31
- modalOptions: ModalOptions | ModalFormOptions
29
+ componentSlots: Record<string, any>,
30
+ modalType: 'modal' | 'modalForm',
31
+ modalOptions: ModalOptions | ModalFormOptions
32
32
  }
33
33
  export interface ModalFormComponentProps {
34
- componentSlots: Record<string, any>,
35
- modalType: 'modalForm',
36
- modalOptions: ModalFormOptions
34
+ componentSlots: Record<string, any>,
35
+ modalType: 'modalForm',
36
+ modalOptions: ModalFormOptions
37
37
  }
38
38
  export interface ModalApi {
39
- showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
40
- showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
41
- hideModal: (index?: number) => void;
39
+ showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
40
+ showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
41
+ hideModal: (index?: number) => void;
42
42
  }
43
43
 
44
44
  export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal');
package/src/styles/buttons.css CHANGED
@@ -1,4 +1,3 @@
1
- button,
2
1
  .bgl_btn,
3
2
  .bgl_flatBtn,
4
3
  .bgl_btn-icon {
@@ -14,7 +13,7 @@ button,
14
13
  font-size: var(--input-font-size);
15
14
  display: inline-block;
16
15
  height: var(--btn-height);
17
- padding: 0
16
+ padding: 0;
18
17
  }
19
18
 
20
19
  .btn-close {
@@ -48,12 +47,23 @@ button,
48
47
  font-family: "Material Symbols Outlined", serif;
49
48
  }
50
49
 
51
-
52
50
  .bgl_btn.thin {
53
51
  height: calc(var(--btn-height) * 0.7);
54
52
  line-height: calc(var(--btn-height) * 0.7);
55
53
  }
56
54
 
55
+ .hover {
56
+ cursor: pointer;
57
+ transition: all 400ms ease;
58
+ }
59
+
60
+ .hover:hover {
61
+ filter: brightness(90%);
62
+ }
63
+
64
+ .hover:active {
65
+ filter: brightness(80%);
66
+ }
57
67
  @media screen and (max-width: 910px) {
58
68
  .bgl_btn {
59
69
  padding: 0 20px;
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
+ }