@bagelink/vue 0.0.158 → 0.0.162

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 (88) hide show
  1. package/dist/components/Btn.vue.d.ts +2 -2
  2. package/dist/components/Btn.vue.d.ts.map +1 -1
  3. package/dist/components/Comments.vue.d.ts.map +1 -1
  4. package/dist/components/DropDown.vue.d.ts.map +1 -1
  5. package/dist/components/FileUploader.vue.d.ts +60 -0
  6. package/dist/components/FileUploader.vue.d.ts.map +1 -0
  7. package/dist/components/LangText.vue.d.ts.map +1 -1
  8. package/dist/components/NavBar.vue.d.ts.map +1 -1
  9. package/dist/components/PersonPreview.vue.d.ts +1 -1
  10. package/dist/components/PersonPreview.vue.d.ts.map +1 -1
  11. package/dist/components/PersonPreviewFormkit.vue.d.ts +1 -1
  12. package/dist/components/PersonPreviewFormkit.vue.d.ts.map +1 -1
  13. package/dist/components/RTXEditor.vue.d.ts.map +1 -1
  14. package/dist/components/TableSchema.vue.d.ts.map +1 -1
  15. package/dist/components/charts/BarChart.vue.d.ts.map +1 -1
  16. package/dist/components/dashboard/Lineart.vue.d.ts +1 -1
  17. package/dist/components/dashboard/Lineart.vue.d.ts.map +1 -1
  18. package/dist/components/form/inputs/CheckInput.vue.d.ts.map +1 -1
  19. package/dist/components/form/inputs/Checkbox.vue.d.ts.map +1 -1
  20. package/dist/components/form/inputs/PasswordInput.vue.d.ts.map +1 -1
  21. package/dist/components/formkit/AddressArray.vue.d.ts.map +1 -1
  22. package/dist/components/formkit/BankDetailsArray.vue.d.ts.map +1 -1
  23. package/dist/components/formkit/ContactArrayFormKit.vue.d.ts.map +1 -1
  24. package/dist/components/formkit/FileUploader.vue.d.ts.map +1 -1
  25. package/dist/components/formkit/MiscFields.vue.d.ts.map +1 -1
  26. package/dist/components/formkit/index.d.ts.map +1 -1
  27. package/dist/components/index.d.ts +2 -1
  28. package/dist/components/index.d.ts.map +1 -1
  29. package/dist/index.cjs +442 -269
  30. package/dist/index.mjs +442 -269
  31. package/dist/style.css +1600 -1404
  32. package/package.json +1 -1
  33. package/src/components/Btn.vue +127 -132
  34. package/src/components/Comments.vue +155 -169
  35. package/src/components/DropDown.vue +73 -77
  36. package/src/components/FileUploader.vue +133 -141
  37. package/src/components/FormKitTable.vue +191 -205
  38. package/src/components/LangText.vue +14 -14
  39. package/src/components/NavBar.vue +264 -261
  40. package/src/components/PersonPreview.vue +123 -148
  41. package/src/components/PersonPreviewFormkit.vue +124 -148
  42. package/src/components/RTXEditor.vue +91 -91
  43. package/src/components/TableSchema.vue +150 -156
  44. package/src/components/charts/BarChart.vue +212 -227
  45. package/src/components/dashboard/Lineart.vue +117 -130
  46. package/src/components/form/inputs/CheckInput.vue +90 -90
  47. package/src/components/form/inputs/Checkbox.vue +38 -41
  48. package/src/components/form/inputs/PasswordInput.vue +56 -63
  49. package/src/components/formkit/AddressArray.vue +150 -173
  50. package/src/components/formkit/BankDetailsArray.vue +175 -198
  51. package/src/components/formkit/ContactArrayFormKit.vue +124 -142
  52. package/src/components/formkit/FileUploader.vue +256 -260
  53. package/src/components/formkit/MiscFields.vue +42 -42
  54. package/src/components/formkit/Toggle.vue +97 -97
  55. package/src/components/formkit/index.ts +3 -3
  56. package/src/components/index.ts +2 -1
  57. package/src/styles/bagel.css +1 -0
  58. package/src/styles/buttons.css +5 -0
  59. package/src/styles/dark.css +46 -0
  60. package/src/styles/fonts/Ploni.css +8 -8
  61. package/src/styles/inputs.css +57 -13
  62. package/src/styles/layout.css +43 -0
  63. package/src/styles/text.css +83 -10
  64. package/src/styles/theme.css +25 -155
  65. package/src/styles/fonts/Ploni/ploni-black.eot +0 -0
  66. package/src/styles/fonts/Ploni/ploni-black.woff +0 -0
  67. package/src/styles/fonts/Ploni/ploni-black.woff2 +0 -0
  68. package/src/styles/fonts/Ploni/ploni-bold.eot +0 -0
  69. package/src/styles/fonts/Ploni/ploni-bold.woff +0 -0
  70. package/src/styles/fonts/Ploni/ploni-bold.woff2 +0 -0
  71. package/src/styles/fonts/Ploni/ploni-demibold.eot +0 -0
  72. package/src/styles/fonts/Ploni/ploni-demibold.woff +0 -0
  73. package/src/styles/fonts/Ploni/ploni-demibold.woff2 +0 -0
  74. package/src/styles/fonts/Ploni/ploni-light.eot +0 -0
  75. package/src/styles/fonts/Ploni/ploni-light.woff +0 -0
  76. package/src/styles/fonts/Ploni/ploni-light.woff2 +0 -0
  77. package/src/styles/fonts/Ploni/ploni-medium.eot +0 -0
  78. package/src/styles/fonts/Ploni/ploni-medium.woff +0 -0
  79. package/src/styles/fonts/Ploni/ploni-medium.woff2 +0 -0
  80. package/src/styles/fonts/Ploni/ploni-regular.eot +0 -0
  81. package/src/styles/fonts/Ploni/ploni-regular.woff +0 -0
  82. package/src/styles/fonts/Ploni/ploni-regular.woff2 +0 -0
  83. package/src/styles/fonts/Ploni/ploni-ultrabold.eot +0 -0
  84. package/src/styles/fonts/Ploni/ploni-ultrabold.woff +0 -0
  85. package/src/styles/fonts/Ploni/ploni-ultrabold.woff2 +0 -0
  86. package/src/styles/fonts/Ploni/ploni-ultralight.eot +0 -0
  87. package/src/styles/fonts/Ploni/ploni-ultralight.woff +0 -0
  88. package/src/styles/fonts/Ploni/ploni-ultralight.woff2 +0 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.158",
4
+ "version": "0.0.162",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/Btn.vue CHANGED
@@ -1,238 +1,233 @@
1
1
  <template>
2
- <component
3
- :is="to?'router-link':is"
4
- :to="to"
5
- :type="type"
6
- :role="role"
7
- :disabled="disabled"
8
- :class="{
9
- [props.color]: true,
10
- 'btn-icon': icon && !slots['default'] && !value,
11
- btn: !icon || slots['default'] || value,
12
- thin: thin,
13
- round: round,
14
- 'btn-txt': flat,
15
- }"
16
- >
17
- <div
18
- class="loading"
19
- v-if="loading"
20
- />
21
- <div
22
- v-else
23
- class="btn-flex"
24
- >
25
- <MaterialIcon
26
- v-if="icon"
27
- :icon="icon"
28
- />
29
- <slot />
30
- <template v-if="!slots['default'] && value">
31
- {{ value }}
32
- </template>
33
- <MaterialIcon
34
- v-if="props['icon.end']"
35
- :icon="props['icon.end']"
36
- />
37
- </div>
38
- </component>
2
+ <component
3
+ :is="to ? 'router-link' : is"
4
+ :to="to"
5
+ :type="type"
6
+ :role="role"
7
+ :disabled="disabled"
8
+ :class="{
9
+ [props.color]: true,
10
+ 'btn-icon': icon && !slots['default'] && !value,
11
+ btn: !icon || slots['default'] || value,
12
+ thin: thin,
13
+ round: round,
14
+ 'btn-txt': flat,
15
+ }"
16
+ >
17
+ <div class="loading" v-if="loading" />
18
+ <div v-else class="btn-flex">
19
+ <MaterialIcon v-if="icon" :icon="icon" />
20
+ <slot />
21
+ <template v-if="!slots['default'] && value">
22
+ {{ value }}
23
+ </template>
24
+ <MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
25
+ </div>
26
+ </component>
39
27
  </template>
40
28
 
41
29
  <script setup lang="ts">
42
- import { useSlots } from 'vue';
30
+ import { useSlots } from "vue";
43
31
 
44
32
  const slots = useSlots();
45
- import type { MaterialIcons } from '@bagelink/vue';
46
- import { MaterialIcon } from '@bagelink/vue';
33
+ import type { MaterialIcons } from "@bagelink/vue";
34
+ import { MaterialIcon } from "@bagelink/vue";
47
35
 
48
36
  const props = withDefaults(
49
- defineProps<{
50
- disabled?: boolean;
51
- icon?: MaterialIcons;
52
- 'icon.end'?: MaterialIcons;
53
- color?: 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'blue' | 'green';
54
- flat?: boolean;
55
- thin?: boolean;
56
- type?: 'button' | 'submit' | 'reset';
57
- loading?: boolean;
58
- role?: string;
59
- value?: string;
60
- to?: string;
61
- round?: boolean;
62
- is?: string;
63
- }>(),
64
- {
65
- loading: false,
66
- round: false,
67
- color: 'gray',
68
- disabled: false,
69
- type: 'button',
70
- role: 'button',
71
- is: 'button',
72
- },
37
+ defineProps<{
38
+ disabled?: boolean;
39
+ icon?: MaterialIcons;
40
+ "icon.end"?: MaterialIcons;
41
+ color?:
42
+ | "light"
43
+ | "red"
44
+ | "gray"
45
+ | "gray-light"
46
+ | "black"
47
+ | "blue"
48
+ | "green";
49
+ flat?: boolean;
50
+ thin?: boolean;
51
+ type?: "button" | "submit" | "reset";
52
+ loading?: boolean;
53
+ role?: string;
54
+ value?: string;
55
+ to?: string;
56
+ round?: boolean;
57
+ is?: string;
58
+ }>(),
59
+ {
60
+ loading: false,
61
+ round: false,
62
+ color: "gray",
63
+ disabled: false,
64
+ type: "button",
65
+ role: "button",
66
+ is: "button",
67
+ }
73
68
  );
74
69
  </script>
75
70
 
76
71
  <style scoped>
77
72
  .loading {
78
- border: 1px solid var(--bgl-white);
79
- border-bottom: 2px solid var(--bgl-white);
80
- animation: spin 1s linear infinite;
81
- border-radius: 100px;
82
- width: 1rem;
83
- height: 1rem;
84
- margin: auto;
73
+ border: 1px solid var(--bgl-white);
74
+ border-bottom: 2px solid var(--bgl-white);
75
+ animation: spin 1s linear infinite;
76
+ border-radius: 100px;
77
+ width: 1rem;
78
+ height: 1rem;
79
+ margin: auto;
85
80
  }
86
81
 
87
82
  @keyframes spin {
88
- 0% {
89
- transform: rotate(0deg);
90
- }
83
+ 0% {
84
+ transform: rotate(0deg);
85
+ }
91
86
 
92
- 100% {
93
- transform: rotate(360deg);
94
- }
87
+ 100% {
88
+ transform: rotate(360deg);
89
+ }
95
90
  }
96
91
 
97
92
  .btn-icon {
98
- height: var(--btn-height);
99
- width: var(--btn-height);
100
- border-radius: 100%;
101
- font-size: 1rem;
102
- background: var(--bgl-blue);
103
- color: var(--bgl-white);
104
- flex-shrink: 0;
105
- transition: var(--bgl-transition);
93
+ height: var(--btn-height);
94
+ width: var(--btn-height);
95
+ border-radius: 100%;
96
+ font-size: 1rem;
97
+ background: var(--bgl-primary);
98
+ color: var(--bgl-white);
99
+ flex-shrink: 0;
100
+ transition: var(--bgl-transition);
106
101
  }
107
102
 
108
103
  .btn {
109
- background: var(--bgl-blue);
110
- color: var(--bgl-white);
111
- padding-left: var(--btn-padding);
112
- padding-right: var(--btn-padding);
113
- transition: var(--bgl-transition);
114
- text-decoration: none;
104
+ background: var(--bgl-primary);
105
+ color: var(--bgl-white);
106
+ padding-left: var(--btn-padding);
107
+ padding-right: var(--btn-padding);
108
+ transition: var(--bgl-transition);
109
+ text-decoration: none;
115
110
  }
116
111
 
117
- .btn[disabled='true'] {
118
- opacity: 0.5;
119
- cursor: not-allowed;
112
+ .btn[disabled="true"] {
113
+ opacity: 0.5;
114
+ cursor: not-allowed;
120
115
  }
121
116
 
122
117
  .btn-flex {
123
- display: flex;
124
- align-items: center;
125
- gap: 0.5rem;
126
- justify-content: center;
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 0.5rem;
121
+ justify-content: center;
127
122
  }
128
123
 
129
124
  .btn .icon-font {
130
- font-size: calc(var(--input-font-size) * 1.3);
125
+ font-size: calc(var(--input-font-size) * 1.3);
131
126
  }
132
127
 
133
128
  .btn:hover,
134
129
  .btn-icon:hover {
135
- filter: var(--bgl-hover-filter);
130
+ filter: var(--bgl-hover-filter);
136
131
  }
137
132
 
138
133
  .btn:active,
139
134
  .btn-icon:active {
140
- filter: var(--bgl-active-filter);
135
+ filter: var(--bgl-active-filter);
141
136
  }
142
137
 
143
138
  .btn.red,
144
139
  .btn-icon.red {
145
- background: var(--bgl-red);
140
+ background: var(--bgl-red);
146
141
  }
147
142
 
148
143
  .btn.light,
149
144
  .btn-icon.light {
150
- background: var(--bgl-blue-light);
151
- color: var(--bgl-blue);
145
+ background: var(--bgl-blue-light);
146
+ color: var(--bgl-primary);
152
147
  }
153
148
 
154
149
  .btn.gray,
155
150
  .btn-icon.gray {
156
- background: var(--bgl-gray-light);
157
- color: var(--bgl-black);
151
+ background: var(--bgl-gray-light);
152
+ color: var(--bgl-black);
158
153
  }
159
154
 
160
155
  .btn.green,
161
156
  .btn-icon.green {
162
- background: var(--bgl-green);
163
- color: var(--bgl-white)
157
+ background: var(--bgl-green);
158
+ color: var(--bgl-white);
164
159
  }
165
160
 
166
161
  .btn.gray-light,
167
162
  .btn-icon.gray-light {
168
- background: var(--bgl-gray-light);
169
- color: var(--bgl-gray);
163
+ background: var(--bgl-gray-light);
164
+ color: var(--bgl-gray);
170
165
  }
171
166
 
172
167
  .btn.black,
173
168
  .btn-icon.black {
174
- background: var(--bgl-black);
169
+ background: var(--bgl-black);
175
170
  }
176
171
 
177
172
  .btn.btn-txt {
178
- color: var(--bgl-blue);
179
- padding-left: var(--btn-padding);
180
- padding-right: var(--btn-padding);
181
- background: transparent;
173
+ color: var(--bgl-primary);
174
+ padding-left: var(--btn-padding);
175
+ padding-right: var(--btn-padding);
176
+ background: transparent;
182
177
  }
183
178
 
184
179
  .btn-icon.btn-txt {
185
- color: var(--bgl-blue);
186
- background: transparent;
180
+ color: var(--bgl-primary);
181
+ background: transparent;
187
182
  }
188
183
 
189
184
  .btn.btn-txt:hover,
190
185
  .btn-icon.btn-txt:hover {
191
- filter: var(--bgl-active-filter);
186
+ filter: var(--bgl-active-filter);
192
187
  }
193
188
 
194
189
  .btn.btn-txt:active,
195
190
  .btn-icon.btn-txt:active {
196
- background: var(--bgl-white);
197
- filter: var(--bgl-hover-filter);
191
+ background: var(--bgl-white);
192
+ filter: var(--bgl-hover-filter);
198
193
  }
199
194
 
200
195
  .btn.btn-txt.red,
201
196
  .btn-icon.btn-txt.red {
202
- color: var(--bgl-red);
197
+ color: var(--bgl-red);
203
198
  }
204
199
 
205
200
  .btn.btn-txt.light,
206
201
  .btn-icon.btn-txt.light {
207
- color: var(--bgl-blue-tint);
202
+ color: var(--bgl-primary-tint);
208
203
  }
209
204
 
210
205
  .btn.btn-txt.black,
211
206
  .btn-icon.btn-txt.black {
212
- color: var(--bgl-black);
207
+ color: var(--bgl-black);
213
208
  }
214
209
 
215
210
  .btn.btn-txt.gray,
216
211
  .btn-icon.btn-txt.gray {
217
- color: var(--bgl-gray);
212
+ color: var(--bgl-gray);
218
213
  }
219
214
 
220
215
  .btn.thin {
221
- padding-left: calc(var(--btn-padding) / 2);
222
- padding-right: calc(var(--btn-padding) / 2);
216
+ padding-left: calc(var(--btn-padding) / 2);
217
+ padding-right: calc(var(--btn-padding) / 2);
223
218
  }
224
219
 
225
220
  .btn.round {
226
- border-radius: calc(var(--btn-border-radius) * 2);
221
+ border-radius: calc(var(--btn-border-radius) * 2);
227
222
  }
228
223
 
229
224
  .btn-icon.thin {
230
- height: calc(var(--btn-height) / 1.5);
231
- width: calc(var(--btn-height) / 1.5);
232
- line-height: 1;
225
+ height: calc(var(--btn-height) / 1.5);
226
+ width: calc(var(--btn-height) / 1.5);
227
+ line-height: 1;
233
228
  }
234
229
 
235
- [dir='rtl'] .icon-font {
236
- transform: rotateY(180deg);
230
+ [dir="rtl"] .icon-font {
231
+ transform: rotateY(180deg);
237
232
  }
238
233
  </style>