urfu-ui-kit-vanilla 1.0.26 → 1.0.29

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 (10) hide show
  1. package/package.json +1 -5
  2. package/playground/index.html +145 -92
  3. package/src/main.css +610 -34
  4. package/src/main.less +14 -0
  5. package/src/styles/components/accordion.less +4 -4
  6. package/src/styles/components/airdatepicker.less +393 -30
  7. package/src/styles/components/modal.less +36 -0
  8. package/src/styles/components/notification.less +11 -5
  9. package/src/styles/components/pagination.less +91 -0
  10. package/src/styles/components/table.less +10 -1
package/package.json CHANGED
@@ -3,12 +3,8 @@
3
3
  "description": "UrFU UI-Kit for Vanilla Web",
4
4
  "license": "UNLICENSED",
5
5
  "private": false,
6
- "version": "1.0.26",
6
+ "version": "1.0.29",
7
7
  "type": "module",
8
- "repository": {
9
- "type": "git",
10
- "url": "https://gitlab.urfu.ru/ui/vanilla"
11
- },
12
8
  "scripts": {
13
9
  "start": "vite serve playground",
14
10
  "build": "vite build",
package/playground/index.html CHANGED
@@ -239,135 +239,135 @@
239
239
  </div>
240
240
  </div>
241
241
  <div class="u-table">
242
- <table class="table">
242
+ <table class="table" aria-busy="false">
243
243
  <thead>
244
- <tr>
245
- <th>
244
+ <tr role="row">
245
+ <th aria-colindex="1" role="columnheader">
246
246
  <p>№</p>
247
247
  </th>
248
- <th>
248
+ <th aria-colindex="2" role="columnheader">
249
249
  <p>Тип отчета</p>
250
250
  </th>
251
- <th>
251
+ <th aria-colindex="3" role="columnheader">
252
252
  <p class="sort">Тип поездки</p>
253
253
  </th>
254
- <th>
254
+ <th aria-colindex="4" role="columnheader">
255
255
  <p>Страна командирования</p>
256
256
  </th>
257
- <th>
257
+ <th aria-colindex="5" role="columnheader">
258
258
  <p>Источник финансирования</p>
259
259
  </th>
260
- <th class="sort">
260
+ <th class="sort" aria-colindex="6" role="columnheader">
261
261
  <p>Сроки</p>
262
262
  </th>
263
- <th>
263
+ <th aria-colindex="7" role="columnheader">
264
264
  <p>ФИО</p>
265
265
  </th>
266
- <th>
266
+ <th aria-colindex="8" role="columnheader">
267
267
  <p>Статус заявки</p>
268
268
  </th>
269
- <th>
269
+ <th aria-colindex="9" role="columnheader">
270
270
  <p>Статус заявки</p>
271
271
  </th>
272
- <th>
272
+ <th aria-colindex="10" role="columnheader">
273
273
  <p>Статус отчета</p>
274
274
  </th>
275
275
  </tr>
276
276
  </thead>
277
- <tbody>
278
- <tr>
279
- <td>
277
+ <tbody role="rowgroup">
278
+ <tr role="row">
279
+ <td role="cell" aria-colindex="1">
280
280
  <a>111</a>
281
281
  </td>
282
- <td>
282
+ <td role="cell" aria-colindex="2">
283
283
  <div>222 <br>435 <br>435 <br>435 <br>435</div>
284
284
  </td>
285
- <td>
285
+ <td role="cell" aria-colindex="3">
286
286
  <div>333</div>
287
287
  </td>
288
- <td>
288
+ <td role="cell" aria-colindex="4">
289
289
  <div>444</div>
290
290
  </td>
291
- <td>
291
+ <td role="cell" aria-colindex="5">
292
292
  <div>555</div>
293
293
  </td>
294
- <td>
294
+ <td role="cell" aria-colindex="6">
295
295
  <div>666</div>
296
296
  </td>
297
- <td>
297
+ <td role="cell" aria-colindex="7">
298
298
  <div>777</div>
299
299
  </td>
300
- <td>
300
+ <td role="cell" aria-colindex="8">
301
301
  <div>888</div>
302
302
  </td>
303
- <td>
303
+ <td role="cell" aria-colindex="9">
304
304
  <div><span>999</span></div>
305
305
  </td>
306
- <td>
306
+ <td role="cell" aria-colindex="10">
307
307
  <div><span>000</span></div>
308
308
  </td>
309
309
  </tr>
310
- <tr>
311
- <td>
310
+ <tr role="row">
311
+ <td role="cell" aria-colindex="1">
312
312
  <a>111</a>
313
313
  </td>
314
- <td>
314
+ <td role="cell" aria-colindex="2">
315
315
  <div>222 <br>435 <br>435 <br>435 <br>435</div>
316
316
  </td>
317
- <td>
317
+ <td role="cell" aria-colindex="3">
318
318
  <div>333</div>
319
319
  </td>
320
- <td>
320
+ <td role="cell" aria-colindex="4">
321
321
  <div>444</div>
322
322
  </td>
323
- <td>
323
+ <td role="cell" aria-colindex="5">
324
324
  <div>555</div>
325
325
  </td>
326
- <td>
326
+ <td role="cell" aria-colindex="6">
327
327
  <div>666</div>
328
328
  </td>
329
- <td>
329
+ <td role="cell" aria-colindex="7">
330
330
  <div>777</div>
331
331
  </td>
332
- <td>
332
+ <td role="cell" aria-colindex="8">
333
333
  <div>888</div>
334
334
  </td>
335
- <td>
335
+ <td role="cell" aria-colindex="9">
336
336
  <div><span>999</span></div>
337
337
  </td>
338
- <td>
338
+ <td role="cell" aria-colindex="10">
339
339
  <div><span>000</span></div>
340
340
  </td>
341
341
  </tr>
342
- <tr>
343
- <td>
342
+ <tr role="row">
343
+ <td role="cell" aria-colindex="1">
344
344
  <a>111</a>
345
345
  </td>
346
- <td>
346
+ <td role="cell" aria-colindex="2">
347
347
  <div>222 <br>435 <br>435 <br>435 <br>435</div>
348
348
  </td>
349
- <td>
349
+ <td role="cell" aria-colindex="3">
350
350
  <div>333fdgfdfgsdgsgsdgsg</div>
351
351
  </td>
352
- <td>
352
+ <td role="cell" aria-colindex="4">
353
353
  <div>444</div>
354
354
  </td>
355
- <td>
355
+ <td role="cell" aria-colindex="5">
356
356
  <div>55gsdfdsfsdfsdfsdfsdfsfsdfsdfsdffgsfgsg5</div>
357
357
  </td>
358
- <td>
358
+ <td role="cell" aria-colindex="6">
359
359
  <div>66sgsdgsdgsd6</div>
360
360
  </td>
361
- <td>
361
+ <td role="cell" aria-colindex="7">
362
362
  <div>77gsdgdsgsdgsfdfsdgsd7</div>
363
363
  </td>
364
- <td>
364
+ <td role="cell" aria-colindex="8">
365
365
  <div>888</div>
366
366
  </td>
367
- <td>
367
+ <td role="cell" aria-colindex="9">
368
368
  <div><span>999</span></div>
369
369
  </td>
370
- <td>
370
+ <td role="cell" aria-colindex="10">
371
371
  <div><span>00gsdgdsgsgs0</span></div>
372
372
  </td>
373
373
  </tr>
@@ -376,142 +376,142 @@
376
376
  </div>
377
377
 
378
378
  <div style="margin-top: 40px;" class="u-table">
379
- <table class="table">
379
+ <table class="table" aria-busy="false">
380
380
  <thead>
381
- <tr>
382
- <th class="sticky">
381
+ <tr role="row">
382
+ <th class="sticky" aria-colindex="1" role="columnheader">
383
383
  <p>№</p>
384
384
  </th>
385
- <th>
385
+ <th aria-colindex="2" role="columnheader">
386
386
  <p>Тип отчета</p>
387
387
  <p>dsdsd</p>
388
388
  </th>
389
- <th>
389
+ <th aria-colindex="3" role="columnheader">
390
390
  <p>Тип поездки</p>
391
391
  <p>dsdsd</p>
392
392
  </th>
393
- <th>
393
+ <th aria-colindex="4" role="columnheader">
394
394
  <p>Страна командирования</p>
395
395
  <p>dsdsd</p>
396
396
  </th>
397
- <th>
397
+ <th aria-colindex="5" role="columnheader">
398
398
  <p>Источник финансирования</p>
399
399
  <p>dsdsd</p>
400
400
  </th>
401
- <th class="sort">
401
+ <th class="sort" aria-colindex="6" role="columnheader">
402
402
  <p>Сроки</p>
403
403
  </th>
404
- <th>
404
+ <th aria-colindex="7" role="columnheader">
405
405
  <p>ФИО</p>
406
406
  <p>ФИО</p>
407
407
  </th>
408
- <th>
408
+ <th aria-colindex="8" role="columnheader">
409
409
  <p>Статус заявки</p>
410
410
  <p>ФИО</p>
411
411
  </th>
412
- <th>
412
+ <th aria-colindex="9" role="columnheader">
413
413
  <p>Статус заявки</p>
414
414
  <p>ФИО</p>
415
415
  </th>
416
- <th>
416
+ <th aria-colindex="10" role="columnheader">
417
417
  <p>Статус отчета</p>
418
418
  </th>
419
419
  </tr>
420
420
  </thead>
421
- <tbody>
422
- <tr>
423
- <td class="sticky">
421
+ <tbody role="rowgroup">
422
+ <tr role="row">
423
+ <td class="sticky" role="cell" aria-colindex="1">
424
424
  <a>111</a>
425
425
  </td>
426
- <td>
426
+ <td role="cell" aria-colindex="2">
427
427
  <div>222 <br>435 <br>435 <br>435 <br>435</div>
428
428
  </td>
429
- <td>
429
+ <td role="cell" aria-colindex="3">
430
430
  <div>333</div>
431
431
  </td>
432
- <td>
432
+ <td role="cell" aria-colindex="4">
433
433
  <div>444</div>
434
434
  </td>
435
- <td>
435
+ <td role="cell" aria-colindex="5">
436
436
  <div>555</div>
437
437
  </td>
438
- <td>
438
+ <td role="cell" aria-colindex="6">
439
439
  <div>666</div>
440
440
  </td>
441
- <td>
441
+ <td role="cell" aria-colindex="7">
442
442
  <div>777</div>
443
443
  </td>
444
- <td>
444
+ <td role="cell" aria-colindex="8">
445
445
  <div>888</div>
446
446
  </td>
447
- <td>
447
+ <td role="cell" aria-colindex="9">
448
448
  <div><span>999</span></div>
449
449
  </td>
450
- <td>
450
+ <td role="cell" aria-colindex="10">
451
451
  <div><span>000</span></div>
452
452
  </td>
453
453
  </tr>
454
- <tr>
455
- <td class="sticky">
454
+ <tr role="row">
455
+ <td class="sticky" role="cell" aria-colindex="1">
456
456
  <a>111</a>
457
457
  </td>
458
- <td>
458
+ <td role="cell" aria-colindex="2">
459
459
  <div>222 <br>435 <br>435 <br>435 <br>435</div>
460
460
  </td>
461
- <td>
461
+ <td role="cell" aria-colindex="3">
462
462
  <div>333</div>
463
463
  </td>
464
- <td>
464
+ <td role="cell" aria-colindex="4">
465
465
  <div>444</div>
466
466
  </td>
467
- <td>
467
+ <td role="cell" aria-colindex="5">
468
468
  <div>555</div>
469
469
  </td>
470
- <td>
470
+ <td role="cell" aria-colindex="6">
471
471
  <div>666</div>
472
472
  </td>
473
- <td>
473
+ <td role="cell" aria-colindex="7">
474
474
  <div>777</div>
475
475
  </td>
476
- <td>
476
+ <td role="cell" aria-colindex="8">
477
477
  <div>888</div>
478
478
  </td>
479
- <td>
479
+ <td role="cell" aria-colindex="9">
480
480
  <div><span>999</span></div>
481
481
  </td>
482
- <td>
482
+ <td role="cell" aria-colindex="10">
483
483
  <div><span>000</span></div>
484
484
  </td>
485
485
  </tr>
486
- <tr>
487
- <td class="sticky">
486
+ <tr role="row">
487
+ <td class="sticky" role="cell" aria-colindex="1">
488
488
  <a>111</a>
489
489
  </td>
490
- <td>
490
+ <td role="cell" aria-colindex="2">
491
491
  <div>222 <br>435 <br>435 <br>435 <br>435</div>
492
492
  </td>
493
- <td>
493
+ <td role="cell" aria-colindex="3">
494
494
  <div>333</div>
495
495
  </td>
496
- <td>
496
+ <td role="cell" aria-colindex="4">
497
497
  <div>444</div>
498
498
  </td>
499
- <td>
499
+ <td role="cell" aria-colindex="5">
500
500
  <div>555</div>
501
501
  </td>
502
- <td>
502
+ <td role="cell" aria-colindex="6">
503
503
  <div>666</div>
504
504
  </td>
505
- <td>
505
+ <td role="cell" aria-colindex="7">
506
506
  <div>777</div>
507
507
  </td>
508
- <td>
508
+ <td role="cell" aria-colindex="8">
509
509
  <div>888</div>
510
510
  </td>
511
- <td>
511
+ <td role="cell" aria-colindex="9">
512
512
  <div><span>999</span></div>
513
513
  </td>
514
- <td>
514
+ <td role="cell" aria-colindex="10">
515
515
  <div><span>000</span></div>
516
516
  </td>
517
517
  </tr>
@@ -613,6 +613,46 @@
613
613
  <input type="text" disabled class="u-input" placeholder="введите">
614
614
  <input type="text" class="u-input">
615
615
  </section>
616
+ <h2>Pagination</h2>
617
+ <section>
618
+ <div class="pagination-container">
619
+ <p class="pagination-container__p">Записи с 1 по 20 из 59</p>
620
+ <div class="pagination-container__p">
621
+ Выводить по
622
+ <div class="pagination-container__limit-wrapper">
623
+ <span class="pagination-container__limit limit-active">20</span>
624
+ <span class="pagination-container__limit">40</span>
625
+ <span class="pagination-container__limit">60</span>
626
+ </div>
627
+ </div>
628
+ <div class="pages">
629
+ <button class="pages__arrow-btn inactive">
630
+ <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none">
631
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77705 11.7071C7.16758 11.3166 7.16758 10.6834 6.77705 10.2929L2.48416 5.99999L6.77705 1.70711C7.16758 1.31658 7.16758 0.683418 6.77705 0.292894C6.38653 -0.0976305 5.75337 -0.0976315 5.36284 0.292892L0.36284 5.29288C0.175304 5.48042 0.069947 5.73477 0.0699466 5.99999C0.0699461 6.26521 0.175303 6.51956 0.362839 6.7071L5.36284 11.7071C5.75336 12.0976 6.38653 12.0976 6.77705 11.7071Z" fill="#D3D3D3"/>
632
+ </svg>
633
+ </button>
634
+ <div class="pages-nums">
635
+ <button class="pages-num pages-num-active">1</b>
636
+ <button class="pages-num">2</button>
637
+ <button class="pages-num">3</button>
638
+ <button class="pages-num">4</button>
639
+ <button class="pages-num">5</button>
640
+ <button class="pages-num">6</button>
641
+ <button class="pages-num pages-dots">
642
+ <svg xmlns="http://www.w3.org/2000/svg" width="9" height="3" viewBox="0 0 9 3" fill="none">
643
+ <path d="M1.61584 2.07C1.4105 2.07 1.23317 1.99533 1.08384 1.846C0.943836 1.69667 0.873836 1.51467 0.873836 1.3C0.873836 1.076 0.943836 0.894 1.08384 0.754C1.23317 0.614 1.4105 0.544 1.61584 0.544C1.82117 0.544 1.99384 0.614 2.13384 0.754C2.28317 0.894 2.35784 1.076 2.35784 1.3C2.35784 1.51467 2.28317 1.69667 2.13384 1.846C1.99384 1.99533 1.82117 2.07 1.61584 2.07ZM4.58263 2.07C4.3773 2.07 4.19997 1.99533 4.05063 1.846C3.91063 1.69667 3.84063 1.51467 3.84063 1.3C3.84063 1.076 3.91063 0.894 4.05063 0.754C4.19997 0.614 4.3773 0.544 4.58263 0.544C4.78797 0.544 4.96063 0.614 5.10063 0.754C5.24997 0.894 5.32463 1.076 5.32463 1.3C5.32463 1.51467 5.24997 1.69667 5.10063 1.846C4.96063 1.99533 4.78797 2.07 4.58263 2.07ZM7.54943 2.07C7.3441 2.07 7.16676 1.99533 7.01743 1.846C6.87743 1.69667 6.80743 1.51467 6.80743 1.3C6.80743 1.076 6.87743 0.894 7.01743 0.754C7.16676 0.614 7.3441 0.544 7.54943 0.544C7.75476 0.544 7.92743 0.614 8.06743 0.754C8.21676 0.894 8.29143 1.076 8.29143 1.3C8.29143 1.51467 8.21676 1.69667 8.06743 1.846C7.92743 1.99533 7.75476 2.07 7.54943 2.07Z" fill="#545454"/>
644
+ </svg>
645
+ </button>
646
+ <button class="pages-num">12</button>
647
+ </div>
648
+ <button class="pages__arrow-btn">
649
+ <svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12" fill="none">
650
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M2.22295 11.7071C1.83242 11.3166 1.83242 10.6834 2.22295 10.2929L6.51584 5.99999L2.22295 1.70711C1.83242 1.31658 1.83242 0.683418 2.22295 0.292894C2.61347 -0.0976305 3.24663 -0.0976315 3.63716 0.292892L8.63716 5.29288C8.8247 5.48042 8.93005 5.73477 8.93005 5.99999C8.93005 6.26521 8.8247 6.51956 8.63716 6.7071L3.63716 11.7071C3.24664 12.0976 2.61347 12.0976 2.22295 11.7071Z" fill="#1E4391"/>
651
+ </svg>
652
+ </button>
653
+ </div>
654
+ </div>
655
+ </section>
616
656
  <section>
617
657
  <div class="u-number">
618
658
  <button class="u-number-up" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();"></button>
@@ -703,6 +743,19 @@
703
743
  <div></div>
704
744
  </label>
705
745
  </section>
746
+ <section>
747
+ <button>привет, брат</button>
748
+ <div class="u-modal">
749
+ <!-- добавить active чтоб открыть -->
750
+ <div class="u-modal__container">
751
+ <div class="u-modal__body">
752
+ <div class="u-modal__exit">
753
+ <button class="u-button-cross"></button>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </section>
706
759
  <section>
707
760
  <h1>Заголовок</h1>
708
761
  <h2>Заголовок</h2>