@bagelink/vue 0.0.188 → 0.0.190

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 (13) hide show
  1. package/dist/components/TableSchema.vue.d.ts.map +1 -1
  2. package/dist/components/form/inputs/DatePicker.vue.d.ts +20 -0
  3. package/dist/components/form/inputs/DatePicker.vue.d.ts.map +1 -0
  4. package/dist/components/form/inputs/index.d.ts +1 -0
  5. package/dist/components/form/inputs/index.d.ts.map +1 -1
  6. package/dist/index.cjs +545 -478
  7. package/dist/index.mjs +546 -479
  8. package/dist/style.css +186 -84
  9. package/package.json +6 -2
  10. package/src/components/TableSchema.vue +79 -70
  11. package/src/components/form/inputs/DatePicker.vue +153 -0
  12. package/src/components/form/inputs/index.ts +1 -0
  13. package/src/components/formkit/FileUploader.vue +4 -4
package/dist/style.css CHANGED
@@ -753,110 +753,110 @@
753
753
  transform: translateY(-2.6rem);
754
754
  }
755
755
 
756
- .list-arrows[data-v-8cd8ab82] {
757
- opacity: 0;
756
+ .list-arrows[data-v-f3a410c2] {
757
+ opacity: 0;
758
758
  }
759
- .list-arrows .icon-font[data-v-8cd8ab82] {
760
- transition: all ease-in-out 0.2s;
759
+ .list-arrows .icon-font[data-v-f3a410c2] {
760
+ transition: all ease-in-out 0.2s;
761
761
  }
762
- .list-arrows.sorted[data-v-8cd8ab82] {
763
- opacity: 1;
762
+ .list-arrows.sorted[data-v-f3a410c2] {
763
+ opacity: 1;
764
764
  }
765
- .col img[data-v-8cd8ab82] {
766
- height: 35px;
767
- margin-top: -14px;
768
- margin-bottom: -14px;
769
- border-radius: 5px;
765
+ .col img[data-v-f3a410c2] {
766
+ height: 35px;
767
+ margin-top: -14px;
768
+ margin-bottom: -14px;
769
+ border-radius: 5px;
770
770
  }
771
- .list-arrows.sorted .desc[data-v-8cd8ab82] {
772
- transform: rotate(180deg);
771
+ .list-arrows.sorted .desc[data-v-f3a410c2] {
772
+ transform: rotate(180deg);
773
773
  }
774
- table[data-v-8cd8ab82] {
775
- border-collapse: separate;
776
- border-spacing: 0 15px;
777
- border-collapse: collapse;
774
+ table[data-v-f3a410c2] {
775
+ border-collapse: separate;
776
+ border-spacing: 0 15px;
777
+ border-collapse: collapse;
778
778
  }
779
- th[data-v-8cd8ab82] {
780
- font-weight: 400;
779
+ th[data-v-f3a410c2] {
780
+ font-weight: 400;
781
781
  }
782
- .row[data-v-8cd8ab82] {
783
- border-bottom: 1px solid var(--border-color);
784
- cursor: pointer;
782
+ .row[data-v-f3a410c2] {
783
+ border-bottom: 1px solid var(--border-color);
784
+ cursor: pointer;
785
785
  }
786
- .row.first-row[data-v-8cd8ab82] {
787
- font-size: 0.8rem;
788
- color: var(--bgl-black-tint);
789
- position: sticky;
790
- top: 0;
791
- z-index: 2;
792
- background: var(--bgl-white);
793
- height: 50px;
794
- vertical-align: bottom;
786
+ .row.first-row[data-v-f3a410c2] {
787
+ font-size: 0.8rem;
788
+ color: var(--bgl-black-tint);
789
+ position: sticky;
790
+ top: 0;
791
+ z-index: 2;
792
+ background: var(--bgl-white);
793
+ height: 50px;
794
+ vertical-align: bottom;
795
795
  }
796
- .row.first-row[data-v-8cd8ab82]::after {
797
- content: "";
798
- border-bottom: 1px solid var(--border-color);
799
- position: absolute;
800
- left: 0;
801
- right: 0;
802
- bottom: -1px;
796
+ .row.first-row[data-v-f3a410c2]::after {
797
+ content: "";
798
+ border-bottom: 1px solid var(--border-color);
799
+ position: absolute;
800
+ left: 0;
801
+ right: 0;
802
+ bottom: -1px;
803
803
  }
804
- .first-row .col[data-v-8cd8ab82] {
805
- cursor: pointer;
806
- background: var(--bgl-white);
804
+ .first-row .col[data-v-f3a410c2] {
805
+ cursor: pointer;
806
+ background: var(--bgl-white);
807
807
  }
808
- .col[data-v-8cd8ab82] {
809
- white-space: nowrap;
810
- padding: 14px;
811
- transition: var(--bgl-transition);
812
- line-height: 1;
813
- padding-left: 1rem;
814
- padding-right: 1rem;
815
- align-items: center;
808
+ .col[data-v-f3a410c2] {
809
+ white-space: nowrap;
810
+ padding: 14px;
811
+ transition: var(--bgl-transition);
812
+ line-height: 1;
813
+ padding-left: 1rem;
814
+ padding-right: 1rem;
815
+ align-items: center;
816
816
  }
817
- .col > div[data-v-8cd8ab82] {
818
- display: flex;
819
- gap: 0.5rem;
817
+ .col>div[data-v-f3a410c2] {
818
+ display: flex;
819
+ gap: 0.5rem;
820
820
  }
821
- .max-col-width[data-v-8cd8ab82] {
822
- max-width: 30vw;
823
- overflow: hidden;
824
- text-overflow: ellipsis;
821
+ .max-col-width[data-v-f3a410c2] {
822
+ max-width: 30vw;
823
+ overflow: hidden;
824
+ text-overflow: ellipsis;
825
825
  }
826
- .col.check .icon-font[data-v-8cd8ab82] {
827
- border-radius: 100%;
828
- background: var(--bgl-blue-20);
829
- color: var(--bgl-primary);
830
- width: 20px;
831
- height: 20px;
832
- display: flex;
833
- align-items: center;
834
- justify-content: center;
835
- margin-top: -2px;
826
+ .col.check .icon-font[data-v-f3a410c2] {
827
+ border-radius: 100%;
828
+ background: var(--bgl-blue-20);
829
+ color: var(--bgl-primary);
830
+ width: 20px;
831
+ height: 20px;
832
+ display: flex;
833
+ align-items: center;
834
+ justify-content: center;
835
+ margin-top: -2px;
836
836
  }
837
- .rows[data-v-8cd8ab82] {
838
- font-size: 0.8125em;
837
+ .rows[data-v-f3a410c2] {
838
+ font-size: 0.8125em;
839
839
  }
840
- .table-list[data-v-8cd8ab82] {
841
- height: 100%;
842
- position: relative;
843
- padding-left: 0 !important;
844
- padding-right: 0 !important;
845
- overflow: auto;
840
+ .table-list[data-v-f3a410c2] {
841
+ height: 100%;
842
+ position: relative;
843
+ padding-left: 0 !important;
844
+ padding-right: 0 !important;
845
+ overflow: auto;
846
846
  }
847
- .BagelTable .table-list[data-v-8cd8ab82] {
848
- overflow: unset;
847
+ .BagelTable .table-list[data-v-f3a410c2] {
848
+ overflow: unset;
849
849
  }
850
- .row-item[data-v-8cd8ab82] {
851
- height: 50px;
852
- transition: all 200ms ease;
850
+ .row-item[data-v-f3a410c2] {
851
+ height: 50px;
852
+ transition: all 200ms ease;
853
853
  }
854
- .row-item[data-v-8cd8ab82]:hover {
855
- background: var(--bgl-gray-light);
854
+ .row-item[data-v-f3a410c2]:hover {
855
+ background: var(--bgl-gray-light);
856
856
  }
857
- .infinite-wrapper[data-v-8cd8ab82] {
858
- overflow-y: auto;
859
- width: 100%;
857
+ .infinite-wrapper[data-v-f3a410c2] {
858
+ overflow-y: auto;
859
+ width: 100%;
860
860
  }
861
861
 
862
862
  .person-card {
@@ -2234,6 +2234,108 @@ input[type='email'][data-v-ed81a514] {
2234
2234
  cursor: not-allowed;
2235
2235
  }
2236
2236
 
2237
+ .datetime-wrap {
2238
+ display: flex;
2239
+ gap: 3rem;
2240
+ padding: 1rem;
2241
+ }
2242
+ .time-wrap {
2243
+ display: grid;
2244
+ gap: 0.5rem;
2245
+ grid-template-columns: 1fr 1fr;
2246
+ width: 100%;
2247
+ }
2248
+ .time-wrap input {
2249
+ display: none;
2250
+ }
2251
+ .time-wrap label {
2252
+ background: var(--input-bg);
2253
+ border-radius: var(--btn-border-radius);
2254
+ line-height: calc(var(--btn-height) * 0.9);
2255
+ display: block;
2256
+ cursor: pointer;
2257
+ transition: var(--bgl-transition);
2258
+ text-align: center;
2259
+ font-size: 16px;
2260
+ color: var(--bgl-primary);
2261
+ border: 1px solid var(--bgl-primary);
2262
+ }
2263
+ .time-wrap input[type="radio"]:checked+label {
2264
+ background: var(--bgl-primary);
2265
+ color: var(--bgl-white);
2266
+ }
2267
+ .time-wrap label:hover {
2268
+ filter: var(--bgl-hover-filter);
2269
+ }
2270
+ .time-wrap label:active {
2271
+ filter: var(--bgl-active-filter);
2272
+ }
2273
+ .dp__theme_light {
2274
+ --dp-background-color: var(--bgl-white);
2275
+ --dp-text-color: var(--bgl-black);
2276
+ --dp-hover-color: var(--input-bg);
2277
+ --dp-hover-text-color: var(--bgl-black);
2278
+ --dp-hover-icon-color: var(--bgl-primary);
2279
+ --dp-primary-color: var(--bgl-primary);
2280
+ --dp-primary-disabled-color: var(--bgl-primary);
2281
+ --dp-primary-text-color: var(--bgl-white);
2282
+ --dp-secondary-color: var(--bgl-gray);
2283
+ --dp-border-color: transparent;
2284
+ --dp-menu-border-color: transparent;
2285
+ --dp-scroll-bar-background: transparent;
2286
+ --dp-scroll-bar-color: var(--bgl-gray);
2287
+ --dp-icon-color: var(--bgl-gray);
2288
+ --dp-highlight-color: var(--bgl-gray-light);
2289
+ }
2290
+ :root {
2291
+ --dp-font-family: inherit;
2292
+ --dp-cell-border-radius: 100%;
2293
+ --dp-common-transition: all 200s ease-in;
2294
+
2295
+ --dp-cell-size: 40px;
2296
+ /*Width and height of calendar cell*/
2297
+ --dp-menu-min-width: 280px;
2298
+ /*Adjust the min width of the menu*/
2299
+ --dp-row-margin: 8px 0;
2300
+ /*Adjust the spacing between rows in the calendar*/
2301
+ }
2302
+ .dp__calendar_header {
2303
+ font-weight: 400;
2304
+ padding: 10px 0 0;
2305
+ margin-bottom: -10px;
2306
+ }
2307
+ .dp__calendar_row>div:last-child {
2308
+ pointer-events: none;
2309
+ }
2310
+ .dp__outer_menu_wrap.dp--menu-wrapper{
2311
+ filter: drop-shadow(0 0 20px var(--bgl-shadow));
2312
+ }
2313
+ .dp__input{
2314
+ background: var(--input-bg);
2315
+ border: none;
2316
+ padding: 0.7rem;
2317
+ border-radius: var(--input-border-radius);
2318
+ color: var(--input-color);
2319
+ min-width: calc(var(--input-height) * 3);
2320
+ width: 100%;
2321
+ }
2322
+ .dp__input:focus-visible {
2323
+ outline: none;
2324
+ box-shadow: inset 0 0 10px #00000012;
2325
+ }
2326
+ @media screen and (max-width: 767px) {
2327
+ .datetime-wrap {
2328
+ flex-wrap: wrap;
2329
+ padding: 0rem;
2330
+ gap: 1rem;
2331
+ justify-content: center;
2332
+ }
2333
+ :root {
2334
+ --dp-menu-min-width: 200px;
2335
+ --dp-cell-size: 35px;
2336
+ }
2337
+ }
2338
+
2237
2339
  .chart-line {
2238
2340
  width: 100%;
2239
2341
  height: 300px;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.188",
4
+ "version": "0.0.190",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
@@ -69,9 +69,13 @@
69
69
  "prosemirror-model": "^1.19.3",
70
70
  "prosemirror-schema-basic": "^1.2.2",
71
71
  "prosemirror-state": "^1.4.3",
72
- "prosemirror-view": "^1.32.4"
72
+ "prosemirror-view": "^1.32.4",
73
+ "@vuepic/vue-datepicker": "^7.4.0"
73
74
  },
74
75
  "peerDependenciesMeta": {
76
+ "@vuepic/vue-datepicker": {
77
+ "optional": true
78
+ },
75
79
  "vue3-charts": {
76
80
  "optional": true
77
81
  },
package/src/components/TableSchema.vue CHANGED
@@ -22,7 +22,11 @@
22
22
  </div>
23
23
  </th>
24
24
  </thead>
25
- <tbody ref="infinite" class="rows infinite" :class="{ loading }">
25
+ <tbody
26
+ ref="infinite"
27
+ class="rows infinite"
28
+ :class="{ loading }"
29
+ >
26
30
  <tr
27
31
  @click="selectElement(row)"
28
32
  class="row row-item position-relative"
@@ -46,7 +50,7 @@
46
50
  v-if="field['v-if'] ? field['v-if'](row[field.id], row) : true"
47
51
  v-bind="bindAttrs(field.attrs, row[field.id], row)"
48
52
  :src="field.$el === 'img' ? row[field.id]?.url : ''"
49
- @update:modelValue="($event:any)=>field?.onUpdate?.($event, row[field.id], row)"
53
+ @update:modelValue="($event: any) => field?.onUpdate?.($event, row[field.id], row)"
50
54
  :modelValue="row[field.id]"
51
55
  >
52
56
  {{
@@ -70,10 +74,12 @@ const slots = useSlots();
70
74
  const loading = $ref(true);
71
75
 
72
76
  const props = defineProps<{
73
- data: any[];
74
- schema?: () => any[];
77
+ data: any[];
78
+ schema?: () => any[];
75
79
  }>();
76
80
 
81
+
82
+
77
83
  const emit = defineEmits(['select']);
78
84
 
79
85
  const selectElement = (data: Record<string, any>) => {
@@ -104,135 +110,138 @@ const sort = (fieldname: string) => {
104
110
  };
105
111
 
106
112
  const columns = $computed(
107
- () => props.schema?.() ||
108
- Object.keys(props.data[0]).map((k: string) => ({ id: k, inputType: 'PlainText' })),
113
+ () => props.schema?.()?.map((field) => ({
114
+ ...field,
115
+ id: field?.relationshipObjKey || field.id,
116
+ })) ||
117
+ Object.keys(props.data[0]).map((k: string) => ({ id: k, inputType: 'PlainText' })),
109
118
  );
110
119
  </script>
111
120
 
112
121
  <style scoped>
113
122
  .list-arrows {
114
- opacity: 0;
123
+ opacity: 0;
115
124
  }
116
125
 
117
126
  .list-arrows .icon-font {
118
- transition: all ease-in-out 0.2s;
127
+ transition: all ease-in-out 0.2s;
119
128
  }
120
129
 
121
130
  .list-arrows.sorted {
122
- opacity: 1;
131
+ opacity: 1;
123
132
  }
124
133
 
125
134
  .col img {
126
- height: 35px;
127
- margin-top: -14px;
128
- margin-bottom: -14px;
129
- border-radius: 5px;
135
+ height: 35px;
136
+ margin-top: -14px;
137
+ margin-bottom: -14px;
138
+ border-radius: 5px;
130
139
  }
131
140
 
132
141
  .list-arrows.sorted .desc {
133
- transform: rotate(180deg);
142
+ transform: rotate(180deg);
134
143
  }
135
144
 
136
145
  table {
137
- border-collapse: separate;
138
- border-spacing: 0 15px;
139
- border-collapse: collapse;
146
+ border-collapse: separate;
147
+ border-spacing: 0 15px;
148
+ border-collapse: collapse;
140
149
  }
141
150
 
142
151
  th {
143
- font-weight: 400;
152
+ font-weight: 400;
144
153
  }
145
154
 
146
155
  .row {
147
- border-bottom: 1px solid var(--border-color);
148
- cursor: pointer;
156
+ border-bottom: 1px solid var(--border-color);
157
+ cursor: pointer;
149
158
  }
150
159
 
151
160
  .row.first-row {
152
- font-size: 0.8rem;
153
- color: var(--bgl-black-tint);
154
- position: sticky;
155
- top: 0;
156
- z-index: 2;
157
- background: var(--bgl-white);
158
- height: 50px;
159
- vertical-align: bottom;
161
+ font-size: 0.8rem;
162
+ color: var(--bgl-black-tint);
163
+ position: sticky;
164
+ top: 0;
165
+ z-index: 2;
166
+ background: var(--bgl-white);
167
+ height: 50px;
168
+ vertical-align: bottom;
160
169
  }
161
170
 
162
171
  .row.first-row::after {
163
- content: "";
164
- border-bottom: 1px solid var(--border-color);
165
- position: absolute;
166
- left: 0;
167
- right: 0;
168
- bottom: -1px;
172
+ content: "";
173
+ border-bottom: 1px solid var(--border-color);
174
+ position: absolute;
175
+ left: 0;
176
+ right: 0;
177
+ bottom: -1px;
169
178
  }
170
179
 
171
180
  .first-row .col {
172
- cursor: pointer;
173
- background: var(--bgl-white);
181
+ cursor: pointer;
182
+ background: var(--bgl-white);
174
183
  }
175
184
 
176
185
  .col {
177
- white-space: nowrap;
178
- padding: 14px;
179
- transition: var(--bgl-transition);
180
- line-height: 1;
181
- padding-left: 1rem;
182
- padding-right: 1rem;
183
- align-items: center;
186
+ white-space: nowrap;
187
+ padding: 14px;
188
+ transition: var(--bgl-transition);
189
+ line-height: 1;
190
+ padding-left: 1rem;
191
+ padding-right: 1rem;
192
+ align-items: center;
184
193
  }
185
194
 
186
- .col > div {
187
- display: flex;
188
- gap: 0.5rem;
195
+ .col>div {
196
+ display: flex;
197
+ gap: 0.5rem;
189
198
  }
190
199
 
191
200
  .max-col-width {
192
- max-width: 30vw;
193
- overflow: hidden;
194
- text-overflow: ellipsis;
201
+ max-width: 30vw;
202
+ overflow: hidden;
203
+ text-overflow: ellipsis;
195
204
  }
196
205
 
197
206
  .col.check .icon-font {
198
- border-radius: 100%;
199
- background: var(--bgl-blue-20);
200
- color: var(--bgl-primary);
201
- width: 20px;
202
- height: 20px;
203
- display: flex;
204
- align-items: center;
205
- justify-content: center;
206
- margin-top: -2px;
207
+ border-radius: 100%;
208
+ background: var(--bgl-blue-20);
209
+ color: var(--bgl-primary);
210
+ width: 20px;
211
+ height: 20px;
212
+ display: flex;
213
+ align-items: center;
214
+ justify-content: center;
215
+ margin-top: -2px;
207
216
  }
208
217
 
209
218
  .rows {
210
- font-size: 0.8125em;
219
+ font-size: 0.8125em;
211
220
  }
212
221
 
213
222
  .table-list {
214
- height: 100%;
215
- position: relative;
216
- padding-left: 0 !important;
217
- padding-right: 0 !important;
218
- overflow: auto;
223
+ height: 100%;
224
+ position: relative;
225
+ padding-left: 0 !important;
226
+ padding-right: 0 !important;
227
+ overflow: auto;
219
228
  }
220
229
 
221
230
  .BagelTable .table-list {
222
- overflow: unset;
231
+ overflow: unset;
223
232
  }
224
233
 
225
234
  .row-item {
226
- height: 50px;
227
- transition: all 200ms ease;
235
+ height: 50px;
236
+ transition: all 200ms ease;
228
237
  }
229
238
 
230
239
  .row-item:hover {
231
- background: var(--bgl-gray-light);
240
+ background: var(--bgl-gray-light);
232
241
  }
233
242
 
234
243
  .infinite-wrapper {
235
- overflow-y: auto;
236
- width: 100%;
244
+ overflow-y: auto;
245
+ width: 100%;
237
246
  }
238
247
  </style>