@bagelink/vue 1.2.87 → 1.2.93

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.
package/dist/style.css CHANGED
@@ -1,4 +1,18 @@
1
1
  @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
2
+ .expand-enter-active,
3
+ .expand-leave-active {
4
+ transition: all 0.2s;
5
+ transition-delay: 0ms;
6
+ }
7
+ .expand-enter-from,
8
+ .expand-leave-to {
9
+ max-height: 0;
10
+ }
11
+ .expand-enter-to,
12
+ .expand-leave-from {
13
+ max-height: 300px;
14
+ }
15
+
2
16
  .accordion-item[data-v-3334f637] {
3
17
  border-bottom: 1px solid var(--border-color);
4
18
  transition: all 0.2s;
@@ -41,20 +55,6 @@
41
55
  text-decoration: underline;
42
56
  }
43
57
 
44
- .expand-enter-active,
45
- .expand-leave-active {
46
- transition: all 0.2s;
47
- transition-delay: 0ms;
48
- }
49
- .expand-enter-from,
50
- .expand-leave-to {
51
- max-height: 0;
52
- }
53
- .expand-enter-to,
54
- .expand-leave-from {
55
- max-height: 300px;
56
- }
57
-
58
58
  .bgl_btn[data-v-99c4aa53] {
59
59
  --btn-bg: var(--bgl-primary);
60
60
  --btn-color: var(--bgl-light-text);
@@ -262,10 +262,6 @@ display: block;
262
262
  object-fit: cover;
263
263
  }
264
264
 
265
- .inline[data-v-689f051f] {
266
- display: inline;
267
- }
268
-
269
265
  .pill {
270
266
  border-radius: 10px;
271
267
  padding: 4px 8px;
@@ -308,6 +304,10 @@ display: block;
308
304
  color: var(--bgl-red);
309
305
  }
310
306
 
307
+ .inline[data-v-689f051f] {
308
+ display: inline;
309
+ }
310
+
311
311
  .bgl_vid iframe[data-v-006552f6],
312
312
  .bgl_vid video[data-v-006552f6] {
313
313
  width: 100%;
@@ -1372,6 +1372,12 @@ fieldset[data-v-f7e758e5] {
1372
1372
  color: var(--label-color) !important;
1373
1373
  }
1374
1374
 
1375
+ /* Global styles */
1376
+ pre code.hljs {
1377
+ padding: 0 !important;
1378
+ background: transparent !important;
1379
+ }
1380
+
1375
1381
  .code-editor-container[data-v-6ab9613f] {
1376
1382
  margin-bottom: 0.5rem;
1377
1383
  height: 100%;
@@ -1440,12 +1446,6 @@ fieldset[data-v-f7e758e5] {
1440
1446
  color: transparent;
1441
1447
  }
1442
1448
 
1443
- /* Global styles */
1444
- pre code.hljs {
1445
- padding: 0 !important;
1446
- background: transparent !important;
1447
- }
1448
-
1449
1449
  .colorInputPick{
1450
1450
  --input-font-size: 12px;
1451
1451
  height: calc(var(--input-height) - 9px) !important;
@@ -2114,42 +2114,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
2114
2114
  }
2115
2115
  .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
2116
2116
 
2117
- .selectinput[data-v-c16650b4] {
2118
- width: 100%;
2119
- }
2120
- .selectinput-option[data-v-c16650b4] {
2121
- padding: 6px 12px;
2122
- cursor: pointer;
2123
- border-radius: 5px;
2124
- transition: all 0.2s;
2125
- display: grid;
2126
- grid-template-columns:1fr;
2127
- justify-content: space-between;
2128
- width: 100%;
2129
- font-size: var(--input-font-size);
2130
- margin-block: 0.15rem;
2131
- }
2132
- .selectinput-option .bgl_icon-font[data-v-c16650b4]{
2133
- line-height: normal;
2134
- }
2135
- .selectinput-options.multiselect .selectinput-option[data-v-c16650b4] {
2136
- grid-template-columns: 10px 1fr;
2137
- }
2138
- .selectinput-options[data-v-c16650b4] {
2139
- max-height: 300px;
2140
- overflow-y: auto;
2141
- }
2142
- .selectinput-option[data-v-c16650b4]:hover, .highlight[data-v-c16650b4] {
2143
- background: var(--bgl-gray-20);
2144
- }
2145
- .isEmpty p[data-v-c16650b4] {
2146
- opacity: 0.3;
2147
- }
2148
- .selected[data-v-c16650b4]{
2149
- /* background: var(--bgl-primary-tint); */
2150
- background: var(--bgl-selected);
2151
- }
2152
-
2153
2117
  .bagel-input label {
2154
2118
  font-size: var(--label-font-size);
2155
2119
  }
@@ -2190,6 +2154,42 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
2190
2154
  /* color: var(--input-color); */
2191
2155
  }
2192
2156
 
2157
+ .selectinput[data-v-c16650b4] {
2158
+ width: 100%;
2159
+ }
2160
+ .selectinput-option[data-v-c16650b4] {
2161
+ padding: 6px 12px;
2162
+ cursor: pointer;
2163
+ border-radius: 5px;
2164
+ transition: all 0.2s;
2165
+ display: grid;
2166
+ grid-template-columns:1fr;
2167
+ justify-content: space-between;
2168
+ width: 100%;
2169
+ font-size: var(--input-font-size);
2170
+ margin-block: 0.15rem;
2171
+ }
2172
+ .selectinput-option .bgl_icon-font[data-v-c16650b4]{
2173
+ line-height: normal;
2174
+ }
2175
+ .selectinput-options.multiselect .selectinput-option[data-v-c16650b4] {
2176
+ grid-template-columns: 10px 1fr;
2177
+ }
2178
+ .selectinput-options[data-v-c16650b4] {
2179
+ max-height: 300px;
2180
+ overflow-y: auto;
2181
+ }
2182
+ .selectinput-option[data-v-c16650b4]:hover, .highlight[data-v-c16650b4] {
2183
+ background: var(--bgl-gray-20);
2184
+ }
2185
+ .isEmpty p[data-v-c16650b4] {
2186
+ opacity: 0.3;
2187
+ }
2188
+ .selected[data-v-c16650b4]{
2189
+ /* background: var(--bgl-primary-tint); */
2190
+ background: var(--bgl-selected);
2191
+ }
2192
+
2193
2193
  .bgl_input .canvas {
2194
2194
  width: 100%;
2195
2195
  height: 100%;
@@ -2205,6 +2205,40 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
2205
2205
  border-radius: var(--input-border-radius);
2206
2206
  }
2207
2207
 
2208
+ .table-row .bagel-input input,
2209
+ .table-row .bagel-input textarea,
2210
+ .table-row .bagel-input .input {
2211
+ border-radius: 0;
2212
+ background: transparent;
2213
+ color: var(--bgl-text-color);
2214
+ }
2215
+ .table-row .bagel-input textarea {
2216
+ resize: none;
2217
+ min-height: 40px;
2218
+ overflow: auto;
2219
+ margin: 0px;
2220
+ padding: 0.64rem 0.7rem 0;
2221
+ }
2222
+ .table-row .bagel-input {
2223
+ margin: 0;
2224
+ }
2225
+ .table-row .bagel-input input:focus-visible,
2226
+ .table-row .bagel-input textarea:focus-visible,
2227
+ .table-row .bagel-input .input:focus-visible {
2228
+ background: var(--border-color);
2229
+ }
2230
+ .ghost {
2231
+ opacity: 0;
2232
+ background: #c8ebfb;
2233
+ }
2234
+ .sortable-chosen {
2235
+ cursor: grabbing !important;
2236
+ border-color: transparent;
2237
+ background: var(--bgl-box-bg);
2238
+ border-radius: 10px;
2239
+ box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
2240
+ }
2241
+
2208
2242
  .table-side-scroll[data-v-e9632f79] {
2209
2243
  overflow: auto;
2210
2244
  margin-inline-start: -1rem;
@@ -2311,40 +2345,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
2311
2345
  opacity: 1;
2312
2346
  }
2313
2347
 
2314
- .table-row .bagel-input input,
2315
- .table-row .bagel-input textarea,
2316
- .table-row .bagel-input .input {
2317
- border-radius: 0;
2318
- background: transparent;
2319
- color: var(--bgl-text-color);
2320
- }
2321
- .table-row .bagel-input textarea {
2322
- resize: none;
2323
- min-height: 40px;
2324
- overflow: auto;
2325
- margin: 0px;
2326
- padding: 0.64rem 0.7rem 0;
2327
- }
2328
- .table-row .bagel-input {
2329
- margin: 0;
2330
- }
2331
- .table-row .bagel-input input:focus-visible,
2332
- .table-row .bagel-input textarea:focus-visible,
2333
- .table-row .bagel-input .input:focus-visible {
2334
- background: var(--border-color);
2335
- }
2336
- .ghost {
2337
- opacity: 0;
2338
- background: #c8ebfb;
2339
- }
2340
- .sortable-chosen {
2341
- cursor: grabbing !important;
2342
- border-color: transparent;
2343
- background: var(--bgl-box-bg);
2344
- border-radius: 10px;
2345
- box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
2346
- }
2347
-
2348
2348
  .tel-input[data-v-24f599bf] {
2349
2349
  direction: ltr;
2350
2350
  text-align: left;
@@ -4368,6 +4368,27 @@ body:has(.bg-dark.is-active) {
4368
4368
  }
4369
4369
  }
4370
4370
 
4371
+ .indicator[data-v-0443aea2] {
4372
+ position: absolute;
4373
+ height: 30px;
4374
+ background-color: var(--bgl-primary);
4375
+ transition: all 0.3s ease;
4376
+ z-index: -1;
4377
+ }
4378
+ .selected[data-v-0443aea2] {
4379
+ color: white !important;
4380
+ }
4381
+ .pagination-info[data-v-0443aea2] {
4382
+ min-width: 60px;
4383
+ text-align: center;
4384
+ font-size: 14px;
4385
+ }
4386
+ .pagination-ellipsis[data-v-0443aea2] {
4387
+ display: flex;
4388
+ align-items: center;
4389
+ padding: 0 4px;
4390
+ }
4391
+
4371
4392
  .bgl_pill-btn[data-v-764b6b8b]{
4372
4393
  color: var(--pill-btn-color);
4373
4394
  background: var(--pill-btn-bg);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "1.2.87",
4
+ "version": "1.2.93",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
@@ -0,0 +1,252 @@
1
+ <script setup lang="ts">
2
+ import { Btn } from '@bagelink/vue'
3
+ import { watch, nextTick } from 'vue'
4
+
5
+ interface Range {
6
+ start: number
7
+ end: number
8
+ }
9
+
10
+ interface PaginationProps {
11
+ totalItems: number
12
+ perPage?: number
13
+ totalPages?: number
14
+ variant?: 'default' | 'simple'
15
+ rtl?: boolean
16
+ maxVisiblePages?: number
17
+ }
18
+
19
+ const props = withDefaults(defineProps<PaginationProps>(), {
20
+ totalItems: 0,
21
+ perPage: 25,
22
+ totalPages: undefined,
23
+ variant: 'default',
24
+ rtl: false,
25
+ maxVisiblePages: 3
26
+ })
27
+
28
+ const page = defineModel<number>('page', { default: 1 })
29
+ const range = defineModel<Range>('range')
30
+
31
+ const paginationContainer = $ref<HTMLElement>()
32
+ let indicatorPosition = $ref(0)
33
+ let indicatorWidth = $ref(0)
34
+
35
+ // Calculate totalPages from totalItems and perPage if not provided directly
36
+ const computedTotalPages = $computed(() => {
37
+ if (props.totalPages !== undefined) return props.totalPages
38
+ const { perPage } = props
39
+ return Math.max(1, Math.ceil(props.totalItems / perPage))
40
+ })
41
+
42
+ watch(
43
+ [() => page.value, () => props.perPage, () => props.totalItems],
44
+ () => {
45
+ if (range.value) {
46
+ const { perPage } = props
47
+ // Calculate zero-based indices
48
+ const start = (page.value - 1) * perPage
49
+ const end = Math.min(start + perPage - 1, props.totalItems - 1)
50
+ range.value = { start, end }
51
+ }
52
+ // Update indicator position when page changes
53
+ nextTick(() => { updateIndicatorPosition() })
54
+ },
55
+ { immediate: true }
56
+ )
57
+
58
+ // Also watch for RTL changes
59
+ watch(() => props.rtl, updateIndicatorPosition)
60
+
61
+ // Calculate which page numbers to show
62
+ const visiblePages = $computed(() => {
63
+ const { maxVisiblePages } = props
64
+
65
+ // If we have few enough pages, show all of them
66
+ if (computedTotalPages <= maxVisiblePages * 2) {
67
+ return Array.from({ length: computedTotalPages }, (_, i) => i + 1)
68
+ }
69
+
70
+ // Always include current page and adjacent pages for navigation
71
+ const mustInclude = new Set<number>()
72
+
73
+ // Current page is always included
74
+ mustInclude.add(page.value)
75
+
76
+ // Ensure adjacent pages are included for navigation
77
+ if (page.value > 1) mustInclude.add(page.value - 1)
78
+ if (page.value < computedTotalPages) mustInclude.add(page.value + 1)
79
+
80
+ // Always include first and last pages
81
+ mustInclude.add(1)
82
+ mustInclude.add(computedTotalPages)
83
+
84
+ // Start with explicitly required pages
85
+ const pageArray = Array.from(mustInclude).sort((a, b) => a - b)
86
+
87
+ // Now fill remaining slots if there's room within maxVisiblePages
88
+ if (pageArray.length < maxVisiblePages + 2) {
89
+ // Try to add pages between existing ones
90
+ for (let i = 0; i < pageArray.length - 1; i++) {
91
+ const current = pageArray[i]
92
+ const next = pageArray[i + 1]
93
+
94
+ if (next - current > 1) {
95
+ // There's a gap - fill in additional pages
96
+ const pagesToAdd = Math.min(next - current - 1, maxVisiblePages + 2 - pageArray.length)
97
+
98
+ const newPages = Array.from(
99
+ { length: pagesToAdd },
100
+ (_, idx) => current + idx + 1
101
+ )
102
+
103
+ pageArray.splice(i + 1, 0, ...newPages)
104
+ i += newPages.length // Skip past inserted items
105
+ }
106
+ }
107
+ }
108
+
109
+ return pageArray
110
+ })
111
+
112
+ function updateIndicatorPosition() {
113
+ if (!paginationContainer) return
114
+
115
+ const selectedButton = paginationContainer.querySelector('.selected')
116
+ if (!selectedButton) return
117
+
118
+ const containerRect = paginationContainer.getBoundingClientRect()
119
+ const buttonRect = selectedButton.getBoundingClientRect()
120
+
121
+ // Get position and dimensions
122
+ indicatorWidth = buttonRect.width
123
+
124
+ if (props.rtl) {
125
+ // RTL positioning - align to right edge
126
+ const rightOffset = containerRect.right - buttonRect.right
127
+ indicatorPosition = rightOffset
128
+ } else {
129
+ // LTR positioning - align to left edge
130
+ const leftOffset = buttonRect.left - containerRect.left
131
+ indicatorPosition = leftOffset
132
+ }
133
+ }
134
+
135
+ function handleClick(p: number) {
136
+ if (p < 1 || p > computedTotalPages) return
137
+ page.value = p
138
+ }
139
+
140
+ function next() {
141
+ handleClick(page.value + 1)
142
+ }
143
+
144
+ function prev() {
145
+ handleClick(page.value - 1)
146
+ }
147
+
148
+ // Convert zero-based index to one-based for display
149
+ function displayIndex(index: number | undefined): string {
150
+ return index === undefined ? '-' : (index + 1).toString()
151
+ }
152
+
153
+ interface PageItem {
154
+ type: 'page' | 'ellipsis'
155
+ key: string | number
156
+ number?: number
157
+ }
158
+
159
+ // Enhanced rendering - creates UI with ellipses in the right positions
160
+ const renderPageButtons = $computed(() => {
161
+ const items: PageItem[] = []
162
+
163
+ for (let i = 0; i < visiblePages.length; i++) {
164
+ const pageNum = visiblePages[i]
165
+
166
+ // Insert ellipsis before this page if needed
167
+ if (i > 0) {
168
+ const prevPage = visiblePages[i - 1]
169
+ if (pageNum - prevPage > 1) {
170
+ items.push({
171
+ type: 'ellipsis',
172
+ key: `ellipsis-${i}`
173
+ })
174
+ }
175
+ }
176
+
177
+ // Add the page button
178
+ items.push({
179
+ type: 'page',
180
+ number: pageNum,
181
+ key: pageNum
182
+ })
183
+ }
184
+
185
+ return items
186
+ })
187
+ </script>
188
+
189
+ <template>
190
+ <div v-if="computedTotalPages > 1" ref="paginationContainer" class="relative flex gap-1 justify-content">
191
+ <!-- Default pagination with page numbers -->
192
+ <template v-if="variant !== 'simple'">
193
+ <div
194
+ class="indicator radius-1"
195
+ :style="{
196
+ [rtl ? 'right' : 'left']: `${indicatorPosition}px`,
197
+ width: `${indicatorWidth}px`,
198
+ }"
199
+ />
200
+ <!-- Render the page buttons and ellipses in order -->
201
+ <template v-for="item in renderPageButtons" :key="item.key">
202
+ <!-- Page button -->
203
+ <Btn
204
+ v-if="item.type === 'page'" flat thin
205
+ :class="{ selected: item.number === page }"
206
+ :value="item.number ? item.number.toString() : ''"
207
+ @click="item.number ? handleClick(item.number) : null"
208
+ />
209
+
210
+ <!-- Ellipsis -->
211
+ <div v-else-if="item.type === 'ellipsis'" class="pagination-ellipsis">
212
+ ...
213
+ </div>
214
+ </template>
215
+ </template>
216
+
217
+ <!-- Simple pagination with prev/next buttons -->
218
+ <template v-else>
219
+ <Btn flat thin :disabled="page <= 1" icon="chevron_left" @click="prev" />
220
+ <span class="pagination-info">
221
+ {{ displayIndex(range?.start) }}-{{ displayIndex(range?.end) }} / {{ props.totalItems }}
222
+ </span>
223
+ <Btn flat thin :disabled="page >= computedTotalPages" icon="chevron_right" @click="next" />
224
+ </template>
225
+ </div>
226
+ </template>
227
+
228
+ <style scoped>
229
+ .indicator {
230
+ position: absolute;
231
+ height: 30px;
232
+ background-color: var(--bgl-primary);
233
+ transition: all 0.3s ease;
234
+ z-index: -1;
235
+ }
236
+
237
+ .selected {
238
+ color: white !important;
239
+ }
240
+
241
+ .pagination-info {
242
+ min-width: 60px;
243
+ text-align: center;
244
+ font-size: 14px;
245
+ }
246
+
247
+ .pagination-ellipsis {
248
+ display: flex;
249
+ align-items: center;
250
+ padding: 0 4px;
251
+ }
252
+ </style>
@@ -2,7 +2,7 @@ import type { BglFormSchemaT } from '@bagelink/vue'
2
2
  import type { ComputedRef, MaybeRefOrGetter } from 'vue'
3
3
  import type { SortDirectionsT } from '../../types/TableSchema'
4
4
  import { useBglSchema, isDate, keyToLabel } from '@bagelink/vue'
5
- import { computed, ref, watch, toRef, toValue } from 'vue'
5
+ import { computed, ref, watch, toValue } from 'vue'
6
6
 
7
7
  const NON_DIGIT_REGEX = /[^\d.-]/g
8
8
 
@@ -48,8 +48,8 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
48
48
 
49
49
  // Get the schema from useBglSchema
50
50
  const schema = useBglSchema<T>({
51
- schema: options.schema,
52
- columns: options.columns,
51
+ schema: toValue(options.schema),
52
+ columns: toValue(options.columns),
53
53
  data: dataValue,
54
54
  })
55
55
 
@@ -89,8 +89,8 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
89
89
 
90
90
  // Watch for changes in schema or columns and resolve schema
91
91
  watch([
92
- options.schema || toRef({}),
93
- options.columns || toRef([]),
92
+ () => toValue(options.schema),
93
+ () => toValue(options.columns),
94
94
  options.data,
95
95
  ], () => {
96
96
  resolveSchema()
@@ -32,6 +32,7 @@ export { default as ModalConfirm } from './ModalConfirm.vue'
32
32
  export { default as ModalForm } from './ModalForm.vue'
33
33
  export { default as NavBar } from './NavBar.vue'
34
34
  export { default as PageTitle } from './PageTitle.vue'
35
+ export { default as Pagination } from './Pagination.vue'
35
36
  export { default as Pill } from './Pill.vue'
36
37
  export { default as RouterWrapper } from './RouterWrapper.vue'
37
38
  export { default as Slider } from './Slider.vue'
@@ -1,23 +0,0 @@
1
- export interface TimeUnit {
2
- singular: string;
3
- plural: string;
4
- }
5
- export type TranslationValue = string | TimeUnit;
6
- export interface LanguageTranslations {
7
- [key: string]: TranslationValue;
8
- }
9
- export type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he';
10
- export type DayFormatTypes = 'DD' | 'DDD' | 'DDDD';
11
- export type MonthFormatTypes = 'MM' | 'MMM' | 'MMMM';
12
- export type YearFormatTypes = 'YY' | 'YYYY';
13
- export type HourFormatTypes = 'HH';
14
- export type MinuteFormatTypes = 'mm';
15
- export type SecondFormatTypes = 'ss';
16
- export type MillisecondFormatTypes = 'sss';
17
- export type AmPmFormatTypes = 'AmPm';
18
- export type DateFormatSeparatorTypes = '/' | '-' | ' ' | ':' | '.';
19
- export type CommonDateFormats = `${DayFormatTypes}${DateFormatSeparatorTypes}${MonthFormatTypes}${DateFormatSeparatorTypes}${YearFormatTypes}` | 'DD.MM.YY' | 'DD.MM.YYYY' | 'DD/MM/YY' | 'DD/MM/YYYY' | 'MM.DD.YY' | 'MM.DD.YYYY' | 'MM/DD/YY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'YY-MM-DD' | 'DD MMM YYYY' | 'DD MMMM YYYY' | 'DDD, DD MMM' | 'DDDD, DD MMMM' | 'MMM DD' | 'MMMM DD';
20
- export type CommonTimeFormats = 'HH:mm' | 'HH:mm:ss' | 'HH:mm:ss:sss' | 'HH:MM' | 'HH:mm AmPm';
21
- export type CommonDateTimeFormats = `${CommonDateFormats} ${CommonTimeFormats}` | `${CommonTimeFormats}, ${CommonDateFormats}` | 'YYYY-MM-DD HH:MM';
22
- export type DateTimeAcceptedFormats = CommonDateFormats | CommonTimeFormats | CommonDateTimeFormats;
23
- //# sourceMappingURL=timeago.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"timeago.d.ts","sourceRoot":"","sources":["../../src/types/timeago.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEhD,MAAM,WAAW,oBAAoB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAA;CAC/B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAClD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AACpD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,CAAA;AAC3C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAA;AAC1C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAA;AAEpC,MAAM,MAAM,wBAAwB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAGlE,MAAM,MAAM,iBAAiB,GAC1B,GAAG,cAAc,GAAG,wBAAwB,GAAG,gBAAgB,GAAG,wBAAwB,GAAG,eAAe,EAAE,GAC9G,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,YAAY,GAAG,UAAU,GACzB,aAAa,GAAG,cAAc,GAC9B,aAAa,GAAG,eAAe,GAC/B,QAAQ,GAAG,SAAS,CAAA;AAEvB,MAAM,MAAM,iBAAiB,GAC1B,OAAO,GAAG,UAAU,GAAG,cAAc,GACrC,OAAO,GACP,YAAY,CAAA;AAGf,MAAM,MAAM,qBAAqB,GAC9B,GAAG,iBAAiB,IAAI,iBAAiB,EAAE,GAC3C,GAAG,iBAAiB,KAAK,iBAAiB,EAAE,GAC5C,kBAAkB,CAAA;AAGrB,MAAM,MAAM,uBAAuB,GAChC,iBAAiB,GACjB,iBAAiB,GACjB,qBAAqB,CAAA"}