@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/components/AddressSearch.vue.d.ts.map +1 -1
- package/dist/components/Carousel2.vue.d.ts +89 -0
- package/dist/components/Carousel2.vue.d.ts.map +1 -0
- package/dist/components/Dropdown.vue.d.ts.map +1 -1
- package/dist/components/Pagination.vue.d.ts +35 -0
- package/dist/components/Pagination.vue.d.ts.map +1 -0
- package/dist/components/calendar/views/CalendarPopover.vue.d.ts +2 -2
- package/dist/components/calendar/views/CalendarPopover.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.cjs +622 -442
- package/dist/index.mjs +623 -443
- package/dist/style.css +115 -94
- package/package.json +1 -1
- package/src/components/Pagination.vue +252 -0
- package/src/components/dataTable/useTableData.ts +5 -5
- package/src/components/index.ts +1 -0
- package/dist/types/timeago.d.ts +0 -23
- package/dist/types/timeago.d.ts.map +0 -1
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
|
@@ -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,
|
|
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
|
|
93
|
-
options.columns
|
|
92
|
+
() => toValue(options.schema),
|
|
93
|
+
() => toValue(options.columns),
|
|
94
94
|
options.data,
|
|
95
95
|
], () => {
|
|
96
96
|
resolveSchema()
|
package/src/components/index.ts
CHANGED
|
@@ -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'
|
package/dist/types/timeago.d.ts
DELETED
|
@@ -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"}
|