@xen-orchestra/web-core 0.35.0 → 0.36.0

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 (118) hide show
  1. package/lib/components/console/VtsRemoteConsole.vue +1 -1
  2. package/lib/components/copy-button/VtsCopyButton.vue +1 -1
  3. package/lib/components/layout/VtsLayoutSidebar.vue +1 -1
  4. package/lib/components/quick-info-card/VtsQuickInfoCard.vue +1 -1
  5. package/lib/components/relative-time/VtsRelativeTime.vue +2 -3
  6. package/lib/components/select/VtsSelect.vue +1 -1
  7. package/lib/components/state-hero/VtsStateHero.vue +20 -10
  8. package/lib/components/table/VtsRow.vue +26 -0
  9. package/lib/components/table/VtsTable.vue +99 -42
  10. package/lib/components/table/cells/VtsCollapsedListCell.vue +59 -0
  11. package/lib/components/table/cells/VtsHeaderCell.vue +31 -0
  12. package/lib/components/table/cells/VtsLinkCell.vue +33 -0
  13. package/lib/components/table/cells/VtsNumberCell.vue +21 -0
  14. package/lib/components/{size-progress-cell/VtsSizeProgressCell.vue → table/cells/VtsProgressBarCell.vue} +8 -5
  15. package/lib/components/table/cells/VtsStatusCell.vue +69 -0
  16. package/lib/components/table/cells/VtsTagCell.vue +24 -0
  17. package/lib/components/table/cells/VtsTextCell.vue +32 -0
  18. package/lib/components/table/cells/VtsTruncatedTextCell.vue +64 -0
  19. package/lib/components/task/VtsQuickTaskButton.vue +1 -1
  20. package/lib/components/tree/VtsTreeLine.vue +1 -1
  21. package/lib/components/ui/alert/UiAlert.vue +1 -1
  22. package/lib/components/ui/button/UiButton.vue +4 -2
  23. package/lib/components/ui/button-icon/UiButtonIcon.vue +12 -11
  24. package/lib/components/ui/column-header/UiColumnHeader.vue +22 -0
  25. package/lib/components/ui/info/UiInfo.vue +5 -1
  26. package/lib/components/ui/input/UiInput.vue +3 -2
  27. package/lib/components/ui/link/UiLink.vue +5 -0
  28. package/lib/components/ui/log-entry-viewer/UiLogEntryViewer.vue +1 -1
  29. package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue +2 -2
  30. package/lib/components/ui/table-cell/UiTableCell.vue +41 -0
  31. package/lib/components/ui/table-pagination/PaginationButton.vue +1 -1
  32. package/lib/components/ui/toaster/UiToaster.vue +1 -1
  33. package/lib/components/ui/top-bottom-table/UiTopBottomTable.vue +6 -2
  34. package/lib/composables/pagination.composable.ts +16 -1
  35. package/lib/composables/relative-time.composable.ts +8 -61
  36. package/lib/composables/table-state.composable.ts +56 -0
  37. package/lib/composables/tree-filter.composable.ts +2 -2
  38. package/lib/icons/fa-icons.ts +2 -0
  39. package/lib/icons/object-icons.ts +1 -1
  40. package/lib/locales/en.json +23 -0
  41. package/lib/locales/fr.json +23 -0
  42. package/lib/packages/form-select/use-form-select-controller.ts +1 -0
  43. package/lib/packages/remote-resource/define-remote-resource.ts +4 -4
  44. package/lib/packages/table/README.md +53 -308
  45. package/lib/packages/table/define-column.ts +7 -0
  46. package/lib/packages/table/define-columns.ts +104 -50
  47. package/lib/packages/table/index.ts +3 -11
  48. package/lib/packages/table/types.ts +10 -0
  49. package/lib/{composables/tree.composable.md → packages/tree/README.md} +28 -23
  50. package/lib/{composables → packages}/tree/branch-definition.ts +9 -4
  51. package/lib/{composables → packages}/tree/branch.ts +15 -20
  52. package/lib/{composables → packages}/tree/build-nodes.ts +5 -5
  53. package/lib/{composables → packages}/tree/define-branch.ts +8 -4
  54. package/lib/{composables → packages}/tree/define-leaf.ts +8 -3
  55. package/lib/{composables → packages}/tree/define-tree.ts +10 -5
  56. package/lib/{composables → packages}/tree/leaf-definition.ts +1 -1
  57. package/lib/{composables → packages}/tree/leaf.ts +3 -3
  58. package/lib/{composables → packages}/tree/tree-node-base.ts +18 -3
  59. package/lib/{composables → packages}/tree/tree-node-definition-base.ts +4 -2
  60. package/lib/{composables → packages}/tree/types.ts +11 -9
  61. package/lib/{composables/tree.composable.ts → packages/tree/use-tree.ts} +24 -11
  62. package/lib/tables/column-definitions/address-column.ts +4 -0
  63. package/lib/tables/column-definitions/button-column.ts +35 -0
  64. package/lib/tables/column-definitions/button-icon-column.ts +30 -0
  65. package/lib/tables/column-definitions/collapsed-list-column.ts +12 -0
  66. package/lib/tables/column-definitions/date-column.ts +34 -0
  67. package/lib/tables/column-definitions/info-column.ts +12 -0
  68. package/lib/tables/column-definitions/input-column.ts +32 -0
  69. package/lib/tables/column-definitions/link-column.ts +14 -0
  70. package/lib/tables/column-definitions/literal-column.ts +9 -0
  71. package/lib/tables/column-definitions/number-column.ts +10 -0
  72. package/lib/tables/column-definitions/percent-column.ts +15 -0
  73. package/lib/tables/column-definitions/progress-bar-column.ts +10 -0
  74. package/lib/tables/column-definitions/select-column.ts +12 -0
  75. package/lib/tables/column-definitions/select-item-column.ts +8 -0
  76. package/lib/tables/column-definitions/status-column.ts +16 -0
  77. package/lib/tables/column-definitions/tag-column.ts +11 -0
  78. package/lib/tables/column-definitions/text-column.ts +11 -0
  79. package/lib/tables/column-definitions/truncated-text-column.ts +10 -0
  80. package/lib/tables/column-sets/backup-issue-columns.ts +15 -0
  81. package/lib/tables/column-sets/backup-job-columns.ts +23 -0
  82. package/lib/tables/column-sets/backup-job-schedule-columns.ts +21 -0
  83. package/lib/tables/column-sets/backup-log-columns.ts +19 -0
  84. package/lib/tables/column-sets/host-columns.ts +19 -0
  85. package/lib/tables/column-sets/network-columns.ts +22 -0
  86. package/lib/tables/column-sets/new-vm-network-columns.ts +24 -0
  87. package/lib/tables/column-sets/new-vm-sr-columns.ts +33 -0
  88. package/lib/tables/column-sets/patch-columns.ts +13 -0
  89. package/lib/tables/column-sets/pif-columns.ts +23 -0
  90. package/lib/tables/column-sets/server-columns.ts +18 -0
  91. package/lib/tables/column-sets/sr-columns.ts +20 -0
  92. package/lib/tables/column-sets/vdi-columns.ts +21 -0
  93. package/lib/tables/column-sets/vif-columns.ts +23 -0
  94. package/lib/tables/column-sets/vm-columns.ts +21 -0
  95. package/lib/tables/helpers/render-body-cell.ts +4 -0
  96. package/lib/tables/helpers/render-head-cell.ts +6 -0
  97. package/lib/tables/helpers/render-loading-cell.ts +5 -0
  98. package/lib/tables/types.ts +7 -0
  99. package/lib/utils/size.util.ts +5 -9
  100. package/package.json +1 -1
  101. package/lib/components/data-table/VtsDataTable.vue +0 -70
  102. package/lib/components/table/ColumnTitle.vue +0 -152
  103. package/lib/packages/table/apply-extensions.ts +0 -26
  104. package/lib/packages/table/define-renderer/define-table-cell-renderer.ts +0 -27
  105. package/lib/packages/table/define-renderer/define-table-renderer.ts +0 -47
  106. package/lib/packages/table/define-renderer/define-table-row-renderer.ts +0 -29
  107. package/lib/packages/table/define-renderer/define-table-section-renderer.ts +0 -29
  108. package/lib/packages/table/define-table/define-multi-source-table.ts +0 -39
  109. package/lib/packages/table/define-table/define-table.ts +0 -13
  110. package/lib/packages/table/define-table/define-typed-table.ts +0 -18
  111. package/lib/packages/table/transform-sources.ts +0 -13
  112. package/lib/packages/table/types/extensions.ts +0 -16
  113. package/lib/packages/table/types/index.ts +0 -47
  114. package/lib/packages/table/types/table-cell.ts +0 -18
  115. package/lib/packages/table/types/table-row.ts +0 -20
  116. package/lib/packages/table/types/table-section.ts +0 -19
  117. package/lib/packages/table/types/table.ts +0 -28
  118. package/lib/types/button.type.ts +0 -3
@@ -10,8 +10,11 @@
10
10
  "account-organization-more": "Account, organization & more…",
11
11
  "add": "Add",
12
12
  "add-filter": "Add filter",
13
+ "add-host-internal-network-in-xo-5": "Add a host internal network in XO-5",
14
+ "add-network-in-xo-5": "Add network in XO-5",
13
15
  "add-or": "+OR",
14
16
  "add-sort": "Add sort",
17
+ "add-vifs-in-xo-5": "Add VIF in XO-5",
15
18
  "admin-login": "Admin login",
16
19
  "admin-password": "Admin password",
17
20
  "admin-password-confirm": "Confirm admin password",
@@ -47,6 +50,7 @@
47
50
  "backed-up-vms": "Backed up VMs",
48
51
  "backup": "Backup",
49
52
  "backup-issues": "Backup issues",
53
+ "backup-job": "Backup job",
50
54
  "backup-jobs": "Backup jobs",
51
55
  "backup-network": "Backup network",
52
56
  "backup-repositories": "Backup repositories",
@@ -366,6 +370,7 @@
366
370
  "last-run-number": "Last run #{n}",
367
371
  "last-week": "Last week",
368
372
  "learn-more": "Learn more",
373
+ "lets-go": "Let's go!",
369
374
  "license-name": "{name} license",
370
375
  "license-socket": "License socket",
371
376
  "license-type": "License type",
@@ -384,6 +389,7 @@
384
389
  "mac-address": "MAC address",
385
390
  "mac-addresses": "MAC addresses",
386
391
  "manage-citrix-pv-drivers-via-windows-update": "Manage citrix PV drivers via Windows Update",
392
+ "manage-vm-lifecycle-in-xo-5": "Manage VM lifecycle in XO-5",
387
393
  "management": "Management",
388
394
  "management-agent-not-detected": "Management agent not detected",
389
395
  "management-agent-version": "Management agent version",
@@ -444,6 +450,7 @@
444
450
  "no-alarms-detected": "No alarms detected",
445
451
  "no-backed-up-vms-detected": "No backed up VMs detected",
446
452
  "no-backup-available": "No backup available",
453
+ "no-backup-job-available": "No backup job available",
447
454
  "no-backup-repositories-detected": "No backup repositories detected",
448
455
  "no-backup-run-available": "No backup run available",
449
456
  "no-config": "No configuration",
@@ -458,6 +465,7 @@
458
465
  "no-pools-detected": "No pools detected",
459
466
  "no-result": "No result",
460
467
  "no-results": "No results",
468
+ "no-schedule-available": "No schedule available",
461
469
  "no-selected-vm-can-be-exported": "No selected VM can be exported",
462
470
  "no-selected-vm-can-be-migrated": "No selected VM can be migrated",
463
471
  "no-server-detected": "No server detected",
@@ -495,6 +503,7 @@
495
503
  "partially-connected": "Partially connected",
496
504
  "password": "Password",
497
505
  "password-invalid": "Password invalid",
506
+ "patch-name": "Patch name",
498
507
  "patches": "Patches",
499
508
  "patches-up-to-date": "Patches up to date",
500
509
  "pause": "Pause",
@@ -528,6 +537,13 @@
528
537
  "power-on-mode": "Power on mode",
529
538
  "power-on-vm-for-console": "Power on your VM to access its console",
530
539
  "power-state": "Power state",
540
+ "popup-first-connection-default-interface": "From now on, this new version will be your default interface. If you prefer to keep XO 5 as your default for now, you can {documentationLink} to do so.",
541
+ "popup-first-connection-early-release": "Please note that this is an early release of an ongoing project. You’ll notice that some familiar pages from XO 5 are not yet available and that most features are currently read-only.",
542
+ "popup-first-connection-feedback-and-impressions": "feedback and impressions",
543
+ "popup-first-connection-follow-this-guide": "follow this guide",
544
+ "popup-first-connection-introduction": "We’re excited to introduce the first official release of Xen Orchestra 6.",
545
+ "popup-first-connection-upcoming-release": "In the upcoming releases, we’ll be adding actions on all objects, user management, backup features, and much more. We hope you’ll enjoy exploring this brand-new interface!",
546
+ "popup-first-connection-feedback": "Before we move forward, we’d love to hear your {feedbackLink} on the current state of XO 6. You can switch back to the previous version anytime by clicking the “XO 5” link in the top-right corner of any page.",
531
547
  "pro-support": "{name} pro support",
532
548
  "professional-support": "Professional support",
533
549
  "properties": "Properties",
@@ -578,12 +594,14 @@
578
594
  "s3-backup-repository": "S3 backup repository",
579
595
  "save": "Save",
580
596
  "scan-pifs": "Scan PIFs",
597
+ "scan-pifs-in-xo-5": "@:scan-pifs in XO-5",
581
598
  "schedule": "Schedule",
582
599
  "schedule-name": "Schedule name",
583
600
  "scheduler-granularity": "Scheduler granularity",
584
601
  "schedules": "Schedules",
585
602
  "secure-boot": "Secure boot",
586
603
  "see-all": "See all",
604
+ "see-details": "See details",
587
605
  "see-less": "See less",
588
606
  "see-n-more": "See {n} more",
589
607
  "select-compression": "Select a compression",
@@ -601,6 +619,8 @@
601
619
  "settings.missing-translations": "Missing or incorrect translations?",
602
620
  "shared": "Shared",
603
621
  "shorter-backup-reports": "Shorter backup reports",
622
+ "show-less": "Show less",
623
+ "show-more": "Show more",
604
624
  "shutdown": "Shutdown",
605
625
  "sidebar.search-tree-view": "Search in treeview",
606
626
  "sidebar.vms-treeview": "VMs treeview",
@@ -700,6 +720,7 @@
700
720
  "unlocked": "Unlocked",
701
721
  "unreachable-hosts": "Unreachable hosts",
702
722
  "unreachable-hosts-reload-page": "Done, reload the page",
723
+ "untitled": "Untitled",
703
724
  "untranslated-text-helper": "By default, untranslated texts will be presented in english.",
704
725
  "up-to-date": "Up-to-date",
705
726
  "update": "Update",
@@ -754,6 +775,7 @@
754
775
  "vms-tags": "VMs tags",
755
776
  "warning": "Warning | Warnings",
756
777
  "weblate": "Weblate",
778
+ "welcome-to-xo6": "Welcome to XO 6!",
757
779
  "with-memory": "With memory",
758
780
  "write": "Write",
759
781
  "xcp-ng": "XCP-ng",
@@ -763,6 +785,7 @@
763
785
  "xo-backups": "XO backups",
764
786
  "xo-lite-under-construction": "XOLite is under construction",
765
787
  "xo-replications": "XO replications",
788
+ "xo-team": "The XO Team",
766
789
  "xoa": "XOA",
767
790
  "xoa-admin-account": "XOA admin account",
768
791
  "xoa-deploy": "XOA deployment",
@@ -10,8 +10,11 @@
10
10
  "account-organization-more": "Compte, organisation et plus…",
11
11
  "add": "Ajouter",
12
12
  "add-filter": "Ajouter un filtre",
13
+ "add-host-internal-network-in-xo-5": "Ajouter un réseau interne à l'hôte dans XO-5",
14
+ "add-network-in-xo-5": "Ajouter un réseau dans XO-5",
13
15
  "add-or": "+OU",
14
16
  "add-sort": "Ajouter un tri",
17
+ "add-vifs-in-xo-5": "Ajouter un VIF dans XO-5",
15
18
  "admin-login": "Nom d'utilisateur administrateur",
16
19
  "admin-password": "Mot de passe administrateur",
17
20
  "admin-password-confirm": "Confirmer le mot de passe administrateur",
@@ -47,6 +50,7 @@
47
50
  "backed-up-vms": "VMs sauvegardées",
48
51
  "backup": "Sauvegarde",
49
52
  "backup-issues": "Problèmes de sauvegarde",
53
+ "backup-job": "Job de sauvegarde",
50
54
  "backup-jobs": "Jobs de sauvegarde",
51
55
  "backup-network": "Réseau de sauvegarde",
52
56
  "backup-repositories": "Dépôts de sauvegarde",
@@ -366,6 +370,7 @@
366
370
  "last-run-number": "Dernière exécution #{n}",
367
371
  "last-week": "Semaine dernière",
368
372
  "learn-more": "En savoir plus",
373
+ "lets-go": "Allons-y !",
369
374
  "license-name": "Licence {name}",
370
375
  "license-socket": "Licence socket",
371
376
  "license-type": "Type de licence",
@@ -384,6 +389,7 @@
384
389
  "mac-address": "Adresse MAC",
385
390
  "mac-addresses": "Adresses MAC",
386
391
  "manage-citrix-pv-drivers-via-windows-update": "Gérer les pilotes Citrix PV via Windows Update",
392
+ "manage-vm-lifecycle-in-xo-5": "Gérer le cycle de vie de la VM dans XO-5",
387
393
  "management": "Gestion",
388
394
  "management-agent-not-detected": "Agent de gestion non détecté",
389
395
  "management-agent-version": "Version de l'agent de gestion",
@@ -444,6 +450,7 @@
444
450
  "no-alarms-detected": "Aucune alarme détectée",
445
451
  "no-backed-up-vms-detected": "Aucune VM sauvegardée détectée",
446
452
  "no-backup-available": "Aucune sauvegarde disponible",
453
+ "no-backup-job-available": "Aucun job de sauvegarde disponible",
447
454
  "no-backup-repositories-detected": "Aucun dépôt de sauvegarde détecté",
448
455
  "no-backup-run-available": "Aucune exécution de sauvegarde disponible",
449
456
  "no-config": "Aucune configuration",
@@ -458,6 +465,7 @@
458
465
  "no-pools-detected": "Aucun pool détecté",
459
466
  "no-result": "Aucun résultat",
460
467
  "no-results": "Aucun résultat",
468
+ "no-schedule-available": "Aucune planification disponible",
461
469
  "no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",
462
470
  "no-selected-vm-can-be-migrated": "Aucune VM sélectionnée ne peut être migrée",
463
471
  "no-server-detected": "Aucun serveur détecté",
@@ -495,6 +503,7 @@
495
503
  "partially-connected": "Partiellement connecté",
496
504
  "password": "Mot de passe",
497
505
  "password-invalid": "Mot de passe incorrect",
506
+ "patch-name": "Nom du patch",
498
507
  "patches": "Patches",
499
508
  "patches-up-to-date": "Patches à jour",
500
509
  "pause": "Pause",
@@ -528,6 +537,13 @@
528
537
  "power-on-mode": "Mode d'alimentation",
529
538
  "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
530
539
  "power-state": "État d'alimentation",
540
+ "popup-first-connection-default-interface": "Désormais, cette nouvelle version sera votre interface par défaut. Si vous préférez conserver XO 5 comme version par défaut pour le moment, vous pouvez {documentationLink}.",
541
+ "popup-first-connection-early-release": "Veuillez noter qu’il s’agit d’une version préliminaire d’un projet en cours. Vous constaterez que certaines pages familières de XO 5 ne sont pas encore disponibles et que la plupart des fonctionnalités sont actuellement en lecture seule.",
542
+ "popup-first-connection-feedback-and-impressions": "retours et impressions",
543
+ "popup-first-connection-follow-this-guide": "suivre ce guide",
544
+ "popup-first-connection-introduction": "Nous sommes ravis de vous présenter la première version officielle de Xen Orchestra 6.",
545
+ "popup-first-connection-upcoming-release": "Dans les prochaines versions, nous ajouterons des actions sur tous les objets, la gestion des utilisateurs, des fonctionnalités de sauvegarde et bien plus encore. Nous espérons que vous apprécierez découvrir cette toute nouvelle interface !",
546
+ "popup-first-connection-feedback": "Avant de poursuivre, nous aimerions recueillir vos {feedbackLink} sur l’état actuel de XO 6. Vous pouvez revenir à la version précédente à tout moment en cliquant sur le lien « XO 5 » en haut à droite de n’importe quelle page.",
531
547
  "pro-support": "Support pro {name}",
532
548
  "professional-support": "Support professionnel",
533
549
  "properties": "Propriétés",
@@ -578,12 +594,14 @@
578
594
  "s3-backup-repository": "Dépot de sauvegarde S3",
579
595
  "save": "Enregistrer",
580
596
  "scan-pifs": "Scan PIFs",
597
+ "scan-pifs-in-xo-5": "@:scan-pifs dans XO-5",
581
598
  "schedule": "Planification",
582
599
  "schedule-name": "Nom de la planification",
583
600
  "scheduler-granularity": "Granularité de la planification",
584
601
  "schedules": "Planifications",
585
602
  "secure-boot": "Démarrage sécurisé",
586
603
  "see-all": "Voir tout",
604
+ "see-details": "Voir les détails",
587
605
  "see-less": "Voir moins",
588
606
  "see-n-more": "Voir {n} de plus",
589
607
  "select-compression": "Sélectionnez une compression",
@@ -601,6 +619,8 @@
601
619
  "settings.missing-translations": "Traductions manquantes ou incorrectes ?",
602
620
  "shared": "Partagé",
603
621
  "shorter-backup-reports": "Rapports de sauvegarde plus courts",
622
+ "show-less": "Voir moins",
623
+ "show-more": "Voir plus",
604
624
  "shutdown": "Arrêter",
605
625
  "sidebar.search-tree-view": "Rechercher dans l'arborescence",
606
626
  "sidebar.vms-treeview": "Arborescence des VMs",
@@ -700,6 +720,7 @@
700
720
  "unlocked": "Débloqué",
701
721
  "unreachable-hosts": "Hôtes inaccessibles",
702
722
  "unreachable-hosts-reload-page": "C'est fait. Rafraîchir la page",
723
+ "untitled": "Sans titre",
703
724
  "untranslated-text-helper": "Par défaut, les textes non traduits seront affichés en anglais.",
704
725
  "up-to-date": "À jour",
705
726
  "update": "Mettre à jour",
@@ -754,6 +775,7 @@
754
775
  "vms-tags": "Tags des VMs",
755
776
  "warning": "Avertissement | Avertissements",
756
777
  "weblate": "Weblate",
778
+ "welcome-to-xo6": "Bienvenue sur XO 6 !",
757
779
  "with-memory": "Avec mémoire",
758
780
  "write": "Écriture",
759
781
  "xcp-ng": "XCP-ng",
@@ -763,6 +785,7 @@
763
785
  "xo-backups": "Sauvegardes XO",
764
786
  "xo-lite-under-construction": "XOLite est en construction",
765
787
  "xo-replications": "Réplications XO",
788
+ "xo-team": "L'équipe XO",
766
789
  "xoa": "XOA",
767
790
  "xoa-admin-account": "Compte administrateur de la XOA",
768
791
  "xoa-deploy": "Déploiement de la XOA",
@@ -53,6 +53,7 @@ export function useFormSelectController(select: FormSelect) {
53
53
  middleware: [shift(), flip(), size()],
54
54
  placement: 'bottom-start',
55
55
  open: isOpen,
56
+ strategy: 'fixed',
56
57
  })
57
58
 
58
59
  /* SEARCH */
@@ -135,9 +135,9 @@ export function defineRemoteResource<
135
135
 
136
136
  const onDataReceived =
137
137
  config.onDataReceived ??
138
- ((data: Ref<TData>, receivedData: any, args?: ResourceContext<TArgs>) => {
138
+ ((data: Ref<TData>, receivedData: any, context?: ResourceContext<TArgs>) => {
139
139
  // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
140
- if (config.watchCollection?.predicate?.(receivedData, args) === false) {
140
+ if (config.watchCollection?.predicate?.(receivedData, context) === false) {
141
141
  return
142
142
  }
143
143
  if (data.value === undefined || (Array.isArray(data.value) && Array.isArray(receivedData))) {
@@ -156,9 +156,9 @@ export function defineRemoteResource<
156
156
 
157
157
  const onDataRemoved =
158
158
  config.onDataRemoved ??
159
- ((data: Ref<TData>, receivedData: any, args?: ResourceContext<TArgs>) => {
159
+ ((data: Ref<TData>, receivedData: any, context?: ResourceContext<TArgs>) => {
160
160
  // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
161
- if (!config.watchCollection?.predicate?.(receivedData, args)) {
161
+ if (config.watchCollection?.predicate?.(receivedData, context) === false) {
162
162
  return
163
163
  }
164
164
 
@@ -1,336 +1,81 @@
1
- # Table System
1
+ # `defineColumn`
2
2
 
3
- Table system that separates data logic from presentation through reusable renderers.
3
+ Define the head and body renderers for a column.
4
4
 
5
- ## Understanding Renderers
5
+ The render functions can receive arguments and must return a VNode.
6
6
 
7
- A **renderer** is a function that creates a VNode for a specific part of the table (cell, row, or table). When you define a renderer, you specify:
7
+ ## Example 1 - A simple text column
8
8
 
9
- 1. **Component**: The Vue component to render (loaded asynchronously)
10
- 2. **Props function** (optional): Default props based on configuration
11
- 3. **Extensions** (optional): Named categories of additional functionality
12
-
13
- ### Props System
14
-
15
- The `props` parameter is a function that receives an optional typed config and returns default props:
16
-
17
- ```typescript
18
- const TextBody = defineTableCellRenderer({
19
- component: () => import('./TextCell.vue'),
20
- props: (config: { text: string }) => ({ data: config.text }),
21
- // ^ This config type will be enforced when using the renderer
22
- })
23
-
24
- // Usage - TypeScript knows you need to provide `text`
25
- TextBody({ text: 'Hello' })
26
- ```
27
-
28
- When you use the renderer, you can:
29
-
30
- - Provide the expected config to satisfy the `props` function
31
- - Add additional props that will be merged
32
- - Override default props
33
-
34
- ```typescript
35
- // The renderer merges:
36
- // 1. Props from the props function: { text: 'Hello' }
37
- // 2. Additional/override props: { class: 'custom' }
38
- TextBody({
39
- text: 'Hello', // Used by props function
40
- props: {
41
- // Additional or override props
42
- class: 'custom',
43
- },
44
- })
9
+ ```ts
10
+ const useTextColumn = defineColumn((config?: { headLabel?: string }) => ({
11
+ renderHead: () => h('th', { class: 'table-head-cell' }, config?.headLabel),
12
+ renderBody: (text: string) => h('td', { class: 'table-text-cell' }, text),
13
+ }))
45
14
  ```
46
15
 
47
- ### Extensions System
48
-
49
- Extensions work like the `props` function but are optional and named. Each extension:
50
-
51
- - Has a unique name (like `selectable`, `highlightable`)
52
- - Receives typed configuration
53
- - Returns the extension arguments (only `props` for now) to merge into the component
16
+ ## Example 2 - A "number with unit" column
54
17
 
55
- ```typescript
56
- const MyRow = defineTableRowRenderer({
57
- component: () => import('./Row.vue'),
58
- extensions: {
59
- selectable: (config: { id: string; selectedId: Ref<string | null> }) => ({
60
- props: {
61
- selected: config.id === config.selectedId.value,
62
- },
18
+ ```ts
19
+ const useNumberWithUnitColumn = defineColumn((config?: { headLabel?: string; defaultUnit?: string }) => ({
20
+ renderHead: () => h('th', config?.headLabel ?? 'User'),
21
+ renderBody: (value: number, unit?: string) =>
22
+ h(NumberCell, {
23
+ value,
24
+ suffix: unit ?? config?.defaultUnit,
63
25
  }),
64
- highlightable: (config: { isHighlighted: boolean }) => ({
65
- props: {
66
- highlighted: config.isHighlighted,
67
- },
68
- }),
69
- },
70
- })
71
-
72
- // Usage - provide config for the extensions you want to use
73
- MyRow({
74
- cells: () => [...],
75
- extensions: {
76
- selectable: { id: user.id, selectedId },
77
- highlightable: { isHighlighted: true },
78
- }
79
- })
26
+ }))
80
27
  ```
81
28
 
82
- Extensions are optional when using the renderer - you only provide the ones you need.
83
-
84
- ## Defining Renderers
85
-
86
- ### Cell Renderers
29
+ # `defineColumns`
87
30
 
88
- Create header and body cell renderers:
31
+ Define a set of columns.
89
32
 
90
- ```typescript
91
- import { defineTableCellRenderer } from '@core/packages/table'
92
-
93
- const TextHeader = defineTableCellRenderer({
94
- component: () => import('./VtsHeaderCell.vue'),
95
- props: (config: { label: string }) => ({
96
- label: config.label,
97
- icon: icon('fa:align-left'),
98
- }),
99
- })
100
-
101
- const TextBody = defineTableCellRenderer({
102
- component: () => import('./body-cells/VtsTextCell.vue'),
103
- props: (config: { text: string | number }) => ({ text: config.text }),
104
- })
33
+ ## Example
105
34
 
106
- // Usage
107
- TextHeader({ label: 'Name' })
108
- TextBody({ text: user.name })
35
+ ```ts
36
+ const useUserTableColumns = defineColumns(() => ({
37
+ fullName: useTextColumn({ headLabel: 'Full name' }),
38
+ email: useTextColumn({ headLabel: 'Email' }),
39
+ age: useNumberWithUnitColumn({ headLabel: 'Age', defaultUnit: 'years' }),
40
+ }))
109
41
  ```
110
42
 
111
- ### Row Renderers
43
+ # Using the columns set
112
44
 
113
- Create row renderer:
45
+ When using the columns set, you could have to provide `head` and/or `body` arguments based on whether any `renderHead` and/or `renderBody` used in the columns set expect arguments.
114
46
 
115
- ```typescript
116
- import { defineTableRowRenderer } from '@core/packages/table'
47
+ ## Example
117
48
 
118
- const DefaultRow = defineTableRowRenderer({
119
- component: () => import('./VtsRow.vue'),
120
- })
121
-
122
- DefaultRow({
123
- cells: () => [...]
124
- })
125
- ```
126
-
127
- ### Table Renderers
128
-
129
- Create table renderer:
130
-
131
- ```typescript
132
- import { defineTableRenderer } from '@core/packages/table'
133
-
134
- const DefaultTable = defineTableRenderer({
135
- component: () => import('./VtsTableNew.vue'),
136
- })
137
-
138
- // Usage
139
- DefaultTable({
140
- thead: MyThead(...),
141
- // thead: { rows: () => [...] }, // to use native "thead"
142
- // thead: { cells: () => [...] }, // to use native "thead" + "tr",
143
- tbody: MyTBody(...),
144
- // tbody: { rows: () => [...] }, // to use native "tbody"
145
- })
146
- ```
147
-
148
- ## Building Tables
149
-
150
- ### Column Definition
49
+ The `body` function receives the row item (here, a `User`) and returns an object where:
151
50
 
152
- Use `defineColumns` to create columns configuration.
153
-
154
- ```typescript
155
- const columns = defineColumns({
156
- name: {
157
- header: () => TextHeader({ label: 'Name' }),
158
- body: user => TextBody({ text: user.name }),
159
- },
160
- email: {
161
- header: () => TextHeader({ label: 'Email' }),
162
- body: user => TextBody({ text: user.email }),
163
- },
164
- // Conditional column
165
- role: isAdmin
166
- ? {
167
- header: () => TextHeader({ label: 'Role' }),
168
- body: user => TextBody({ text: user.role }),
169
- }
170
- : undefined,
171
- })
172
- ```
51
+ - **Keys** are column names (`fullName`, `email`, `age`)
52
+ - **Values** are functions that receive the column's original renderer (`r`) and must return a VNode
173
53
 
174
- `header` and `body` can also take a config parameter if needed:
175
-
176
- ```typescript
177
- const columns = defineColumns({
178
- name: {
179
- header: (config) => TextHeader(...),
180
- body: (user, config) => TextBody(...),
181
- },
182
- })
183
- ```
184
-
185
- ```typescript
186
- // API
187
- columns.getHeaderCells(config?) // Array of header cell VNodes
188
- columns.getBodyCells(user, config?) // Array of body cell VNodes for a row
189
- columns.toggleColumn('name') // Toggle column visibility
190
- columns.toggleColumn('name', true) // Force column visibility
191
- columns.visibleColumnsCount // ComputedRef<number>, useful for colspan
192
- ```
54
+ You can either use the original renderer by calling `r(data)`, or ignore it and return your own VNode.
193
55
 
194
- ### Table Definition
195
-
196
- Use one of three table definition functions:
197
-
198
- #### Define basic single-source table: `defineTable`
199
-
200
- ```typescript
201
- const { getHeaderCells, getBodyCells } = defineColumns(...)
202
-
203
- const useUserTable = defineTable((sources: ComputedRef<User[]>) =>
204
- () => DefaultTable({
205
- thead: {
206
- cells: () => getHeaderCells()
207
- },
208
- tbody: {
209
- rows: () => sources.value.map(user =>
210
- DefaultRow({
211
- cells: () => getBodyCells(user)
212
- })
213
- )
214
- },
215
- })
216
- )
217
- ```
218
-
219
- ```typescript
220
- // Usage
221
- const users = ref<User[]>([...])
222
-
223
- const table = useUserTable(users, {})
224
- ```
225
-
226
- `defineTable` setup function can also define a config parameter as second argument:
227
-
228
- ```typescript
229
- const useUserTable = defineTable((sources: ComputedRef<User[]>, config: { needThis: string }) => ...)
230
-
231
- const table = useUserTable(users, { needThis: 'value' })
232
- ```
233
-
234
- #### Define type-discriminated table: `defineTypedTable`
235
-
236
- ```typescript
237
- type Source = { type: 'user'; sources: ComputedRef<User[]> } | { type: 'admin'; sources: ComputedRef<Admin[]> }
238
-
239
- const useItemTable = defineTypedTable(({ type, sources }: Source) => {
240
- // If type === 'user', sources is ComputedRef<User[]>
241
- // If type === 'admin', sources is ComputedRef<Admin[]>
242
-
243
- return () => DefaultTable({...})
244
- })
245
-
246
- // Usage
247
- useItemTable('admin', admins, {})
248
- ```
249
-
250
- #### Define multiple sources table: `defineMultiSourceTable`
251
-
252
- ```typescript
253
- type Sources = {
254
- users: ComputedRef<User[]>
255
- admins: ComputedRef<Admin[]>
256
- }
257
-
258
- const useDashboard = defineMultiSourceTable((sources: Sources) => {
259
- // sources.users: ComputedRef<User[]>
260
- // sources.admins: ComputedRef<Admin[]>
261
-
262
- return () => DefaultTable({...})
263
- })
264
-
265
- // Usage
266
- useDashboard({ users, admins }, {})
267
- ```
268
-
269
- ### Source Transformation
270
-
271
- When using a defined table, if passed sources doesn't match expected sources, then a `transform` config will be required to add missing or incorrectly typed properties:
272
-
273
- ```typescript
274
- type User = {
275
- id: string
276
- fullName: string
277
- }
278
-
279
- const useUserTable = defineTable((sources: ComputedRef<User[]>) => {})
280
-
281
- // Raw data has different shape
282
- interface RawUser {
283
- uuid: string
284
- firstName: string
285
- lastName: string
286
- }
287
-
288
- // Transform is required when types don't match
289
- useUserTable(rawUsers, {
290
- transform: user => ({
291
- id: user.uuid,
292
- fullName: `${user.firstName} ${user.lastName}`,
56
+ ```ts
57
+ const { HeadCells, BodyCells } = useUserTableColumns({
58
+ body: (user: User) => ({
59
+ fullName: r => r(`${user.firstName} ${user.lastName}`),
60
+ email: r => r(user.email),
61
+ age: r => r(user.age < 2 ? { value: toMonths(user.age), unit: 'months' } : { value: user.age }),
293
62
  }),
294
63
  })
295
-
296
- // Transform is optional when types already match
297
- useUserTable(users, {})
298
64
  ```
299
65
 
300
- ## Rendering the table
301
-
302
- ```vue
66
+ ```html
303
67
  <template>
304
- <MyUsersTable />
68
+ <table>
69
+ <thead>
70
+ <tr>
71
+ <HeadCells />
72
+ </tr>
73
+ </thead>
74
+ <tbody>
75
+ <tr v-for="user in users" :key="user.id">
76
+ <BodyCells :item="user" />
77
+ </tr>
78
+ </tbody>
79
+ </table>
305
80
  </template>
306
-
307
- <script setup lang="ts">
308
- const MyUsersTable = useUsersTable(users, {})
309
- </script>
310
81
  ```
311
-
312
- ## Props
313
-
314
- When a table is rendered, each element's props will be merged together in the following order:
315
-
316
- 1. Props from the renderer `props` function
317
- 2. Props from extensions `props` functions
318
- 3. Props provided when using the renderer
319
-
320
- They will be merged with Vue's default merging strategy (for example, `class` and `style` will be concatenated).
321
-
322
- ## API Reference
323
-
324
- ### Renderer Functions
325
-
326
- - `defineTableRenderer` - Define table wrapper (`table`)
327
- - `defineTableSectionRenderer` - Define table sections (`thead` / `tbody`)
328
- - `defineTableRowRenderer` - Define table rows (`tr`)
329
- - `defineTableCellRenderer` - Define table cells (`th` / `td`)
330
-
331
- ### Table Functions
332
-
333
- - `defineTable` - Single source table
334
- - `defineTypedTable` - Type-discriminated table
335
- - `defineMultiSourceTable` - Multiple sources table
336
- - `defineColumns` - Column definitions
@@ -0,0 +1,7 @@
1
+ import type { ColumnRenderer } from '@core/packages/table/types.ts'
2
+
3
+ export function defineColumn<TSetupArgs extends any[], TRenderHeadArgs extends any[], TRenderBodyArgs extends any[]>(
4
+ setup: (...args: TSetupArgs) => ColumnRenderer<TRenderHeadArgs, TRenderBodyArgs>
5
+ ) {
6
+ return setup
7
+ }