@bagelink/vue 0.0.431 → 0.0.437

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 (19) hide show
  1. package/dist/components/form/BglField.vue.d.ts.map +1 -1
  2. package/dist/components/form/BglForm.vue.d.ts +4 -1
  3. package/dist/components/form/BglForm.vue.d.ts.map +1 -1
  4. package/dist/components/form/inputs/RadioPillsInput.vue.d.ts.map +1 -1
  5. package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
  6. package/dist/index.cjs +48 -26
  7. package/dist/index.mjs +48 -26
  8. package/dist/style.css +169 -128
  9. package/dist/utils/BagelFormUtils.d.ts +1 -0
  10. package/dist/utils/BagelFormUtils.d.ts.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/form/BglField.vue +5 -3
  13. package/src/components/form/BglForm.vue +13 -9
  14. package/src/components/form/inputs/RadioPillsInput.vue +4 -5
  15. package/src/components/form/inputs/SelectInput.vue +214 -217
  16. package/src/styles/bagel.css +60 -8
  17. package/src/styles/modal.css +74 -75
  18. package/src/styles/scrollbar.css +1 -2
  19. package/src/utils/BagelFormUtils.ts +44 -10
package/src/styles/modal.css CHANGED
@@ -1,118 +1,117 @@
1
1
  .bg-dark {
2
- position: fixed;
3
- top: 0;
4
- right: 0;
5
- left: 0;
6
- bottom: 0;
7
- background-color: rgba(0, 0, 0, 0.7);
8
- z-index: 999;
9
- pointer-events: none;
10
- opacity: 0;
11
- transition: all ease-in-out 0.3s;
12
- max-height: 100vh;
13
- overflow: auto;
14
- margin: 0 auto;
15
- width: 100%;
16
- display: grid;
17
- align-items: center;
2
+ position: fixed;
3
+ top: 0;
4
+ right: 0;
5
+ left: 0;
6
+ bottom: 0;
7
+ background-color: rgba(0, 0, 0, 0.7);
8
+ z-index: 999;
9
+ pointer-events: none;
10
+ opacity: 0;
11
+ transition: all ease-in-out 0.3s;
12
+ max-height: 100vh;
13
+ overflow: scroll;
14
+ margin: 0 auto;
15
+ width: 100%;
16
+ display: grid;
17
+ align-items: center;
18
+ overflow-x: hidden;
18
19
  }
19
20
 
21
+
20
22
  .bg-lignt {
21
- background-color: var(--bgl-white);
23
+ background-color: var(--bgl-white);
22
24
  }
23
25
 
24
26
  .modal {
25
- width: 96%;
26
- max-width: 720px;
27
- /* transform: scale(0.5); */
28
- /* opacity: 0; */
29
- transition: all ease-in-out 0.18s;
30
- margin-left: auto;
31
- margin-right: auto;
32
- height: fit-content;
27
+ width: 96%;
28
+ max-width: 720px;
29
+ /* transform: scale(0.5); */
30
+ /* opacity: 0; */
31
+ transition: all ease-in-out 0.18s;
32
+ margin-left: auto;
33
+ margin-right: auto;
34
+ height: fit-content;
33
35
  }
34
36
 
35
37
  .small-modal .modal {
36
- max-width: 300px;
37
- text-align: center;
38
+ max-width: 300px;
39
+ text-align: center;
38
40
  }
39
41
 
40
42
  .tool-bar {
41
- margin: -2rem -1rem 1rem;
42
- display: flex;
43
- justify-content: space-between;
44
- position: -webkit-sticky;
45
- position: sticky;
46
- padding-top: 1rem;
47
- top: 0rem;
48
- z-index: 3;
49
- background: var(--bgl-white);
43
+ margin: -2rem -1rem 1rem;
44
+ display: flex;
45
+ justify-content: space-between;
46
+ position: -webkit-sticky;
47
+ position: sticky;
48
+ padding-top: 1rem;
49
+ top: 0rem;
50
+ z-index: 3;
51
+ background: var(--bgl-white);
50
52
  }
51
53
 
52
54
  .modal-size {
53
- cursor: pointer;
55
+ cursor: pointer;
54
56
  }
55
57
 
56
58
  .is-side .modal {
57
- inset-inline-end: -1720px;
58
- transform: scale(1);
59
- opacity: 1;
60
- /* position: fixed; */
61
- /* top: 20px; */
62
- /* bottom: 20px; */
63
- max-width: 600px;
64
- width: 90%;
65
- margin-top: 20px;
66
- margin-bottom: 20px;
67
- margin-inline-start: auto;
68
- margin-inline-end: 20px;
69
- min-height: calc(100vh - 40px);
70
- transform: translateX(100%);
59
+ inset-inline-end: -1720px;
60
+ transform: scale(1);
61
+ opacity: 1;
62
+ max-width: 600px;
63
+ width: 90%;
64
+ margin-top: 20px;
65
+ margin-bottom: 20px;
66
+ margin-inline-start: auto;
67
+ margin-inline-end: 20px;
68
+ min-height: calc(100vh - 40px);
69
+ transform: translateX(100%);
71
70
  }
72
71
 
73
72
  .is-active .modal {
74
- transform: scale(1);
75
- opacity: 1;
76
- box-shadow: 6px 6px 20px 20px #0000001c;
73
+ transform: scale(1);
74
+ opacity: 1;
75
+ box-shadow: 6px 6px 20px 20px #0000001c;
77
76
  }
78
77
 
79
78
  .bg-lignt .modal {
80
- transform: scale(1);
81
- border: 1px solid var(--border-color);
79
+ transform: scale(1);
80
+ border: 1px solid var(--border-color);
82
81
  }
83
82
 
84
83
  .bg-lignt.is-active .modal {
85
- box-shadow: none;
84
+ box-shadow: none;
86
85
  }
87
86
 
88
87
  .is-active.is-side .modal {
89
- inset-inline-end: 0px;
90
- transform: translateX(0%);
88
+ inset-inline-end: 0px;
89
+ transform: translateX(0%);
91
90
  }
92
91
 
93
92
  .bg-dark.is-active {
94
- opacity: 1;
95
- pointer-events: all;
93
+ opacity: 1;
94
+ pointer-events: all;
96
95
  }
97
96
 
98
97
  .is-side.bg-dark.is-active {
99
- opacity: 1;
100
- align-items: stretch;
98
+ opacity: 1;
99
+ align-items: stretch;
101
100
  }
102
101
 
103
102
  .is-side.is-active .modal {
104
- pointer-events: all;
103
+ pointer-events: all;
105
104
  }
106
105
 
107
106
  @media screen and (max-width: 910px) {
108
- .tool-bar {
109
- margin: -1rem 0rem 1rem;
110
- padding-bottom: 1rem;
111
- align-items: center;
112
- }
113
-
114
- .is-active.is-side .modal {
115
- margin-inline-end: 5%;
116
- margin-inline-start: 5%;
117
- }
118
- }
107
+ .tool-bar {
108
+ margin: -1rem 0rem 1rem;
109
+ padding-bottom: 1rem;
110
+ align-items: center;
111
+ }
112
+
113
+ .is-active.is-side .modal {
114
+ margin-inline-end: 5%;
115
+ margin-inline-start: 5%;
116
+ }
117
+ }
package/src/styles/scrollbar.css CHANGED
@@ -4,8 +4,7 @@
4
4
  }
5
5
 
6
6
  ::-webkit-scrollbar-track {
7
- /* border-left: 1px solid var(--bgl-gray-light); */
8
- /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
7
+ /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
9
8
  }
10
9
 
11
10
  ::-webkit-scrollbar-thumb {
package/src/utils/BagelFormUtils.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  import type { Field } from '@bagelink/vue';
2
2
 
3
- export type Option = string | number | Record<string, any> | { label: string, value: string | number };
3
+ export type Option =
4
+ | string
5
+ | number
6
+ | Record<string, any>
7
+ | { label: string; value: string | number };
4
8
 
5
9
  interface InputOptions {
6
10
  required?: boolean;
@@ -8,6 +12,7 @@ interface InputOptions {
8
12
  class?: string;
9
13
  defaultValue?: string;
10
14
  disabled?: boolean;
15
+ helptext?: string;
11
16
  }
12
17
 
13
18
  interface TextInputOptions extends InputOptions {
@@ -27,9 +32,13 @@ interface NumFieldOptions extends InputOptions {
27
32
  step?: number;
28
33
  }
29
34
 
30
- type RichTextOptions = InputOptions
35
+ type RichTextOptions = InputOptions;
31
36
 
32
- export function richText(id: string, label?: string, options?: RichTextOptions) {
37
+ export function richText(
38
+ id: string,
39
+ label?: string,
40
+ options?: RichTextOptions,
41
+ ) {
33
42
  return {
34
43
  $el: 'richtext',
35
44
  class: options?.class,
@@ -41,7 +50,11 @@ export function richText(id: string, label?: string, options?: RichTextOptions)
41
50
  };
42
51
  }
43
52
 
44
- export function txtField(id: string, label?: string, options?: TextInputOptions): Field {
53
+ export function txtField(
54
+ id: string,
55
+ label?: string,
56
+ options?: TextInputOptions,
57
+ ): Field {
45
58
  return {
46
59
  $el: 'text',
47
60
  class: options?.class,
@@ -49,11 +62,20 @@ export function txtField(id: string, label?: string, options?: TextInputOptions)
49
62
  id,
50
63
  label,
51
64
  placeholder: options?.placeholder,
52
- attrs: { type: options?.type, pattern: options?.pattern, multiline: options?.multiline },
65
+ attrs: {
66
+ type: options?.type,
67
+ pattern: options?.pattern,
68
+ multiline: options?.multiline,
69
+ },
53
70
  };
54
71
  }
55
72
 
56
- export function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: SlctInputOptions): Field {
73
+ export function slctField(
74
+ id: string,
75
+ label?: string,
76
+ options?: Option[] | (() => Option[]),
77
+ config?: SlctInputOptions,
78
+ ): Field {
57
79
  return {
58
80
  $el: 'select',
59
81
  id,
@@ -63,11 +85,19 @@ export function slctField(id: string, label?: string, options?: Option[] | (() =
63
85
  required: config?.required,
64
86
  label,
65
87
  defaultValue: config?.defaultValue,
66
- attrs: { disabled: config?.disabled, searchable: config?.searchable, multiselect: config?.multiselect },
88
+ attrs: {
89
+ disabled: config?.disabled,
90
+ searchable: config?.searchable,
91
+ multiselect: config?.multiselect,
92
+ },
67
93
  };
68
94
  }
69
95
 
70
- export function checkField(id: string, label?: string, options?: NumFieldOptions): Field {
96
+ export function checkField(
97
+ id: string,
98
+ label?: string,
99
+ options?: NumFieldOptions,
100
+ ): Field {
71
101
  return {
72
102
  $el: 'check',
73
103
  class: options?.class,
@@ -77,7 +107,11 @@ export function checkField(id: string, label?: string, options?: NumFieldOptions
77
107
  };
78
108
  }
79
109
 
80
- export function numField(id: string, label?: string, options?: NumFieldOptions): Field {
110
+ export function numField(
111
+ id: string,
112
+ label?: string,
113
+ options?: NumFieldOptions,
114
+ ): Field {
81
115
  return {
82
116
  $el: 'text',
83
117
  class: options?.class,
@@ -92,7 +126,7 @@ export function numField(id: string, label?: string, options?: NumFieldOptions):
92
126
  export function frmRow(...children: Field[]) {
93
127
  return {
94
128
  $el: 'div',
95
- class: 'flex gap-1 m_block mt-1',
129
+ class: 'flex gap-1 m_block',
96
130
  children,
97
131
  };
98
132
  }