@usssa/component-library 1.0.0-alpha.61 → 1.0.0-alpha.63

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 (97) hide show
  1. package/package.json +4 -3
  2. package/src/App.vue +0 -9
  3. package/src/assets/files.png +0 -0
  4. package/src/assets/logo.svg +0 -19
  5. package/src/assets/no-result.png +0 -0
  6. package/src/assets/quasar-logo-vertical.svg +0 -15
  7. package/src/boot/.gitkeep +0 -0
  8. package/src/boot/google-maps.js +0 -11
  9. package/src/components/ComponentLink.vue +0 -26
  10. package/src/components/core/UAvatar.vue +0 -165
  11. package/src/components/core/UAvatarGroup.vue +0 -119
  12. package/src/components/core/UBadgeStd.vue +0 -91
  13. package/src/components/core/UBannerStd.vue +0 -115
  14. package/src/components/core/UBreadCrumbs.vue +0 -67
  15. package/src/components/core/UBtnIcon.vue +0 -158
  16. package/src/components/core/UBtnStd.vue +0 -129
  17. package/src/components/core/UBtnToggle.vue +0 -68
  18. package/src/components/core/UCheckboxStd.vue +0 -95
  19. package/src/components/core/UChip.vue +0 -251
  20. package/src/components/core/UDialogStd.vue +0 -242
  21. package/src/components/core/UDrawer.vue +0 -215
  22. package/src/components/core/UInnerLoader.vue +0 -58
  23. package/src/components/core/UInputAddressLookup.vue +0 -466
  24. package/src/components/core/UInputPhoneStd.vue +0 -295
  25. package/src/components/core/UInputTextStd.vue +0 -297
  26. package/src/components/core/UInputTypeaheadAdvanceSearch.vue +0 -59
  27. package/src/components/core/UMenuButtonStd.vue +0 -274
  28. package/src/components/core/UMenuDropdown.vue +0 -75
  29. package/src/components/core/UMenuDropdownAdvancedSearch.vue +0 -299
  30. package/src/components/core/UMenuItem.vue +0 -133
  31. package/src/components/core/UMenuSearch.vue +0 -682
  32. package/src/components/core/UMultiSelectStd.vue +0 -259
  33. package/src/components/core/UPagination.vue +0 -104
  34. package/src/components/core/URadioBtn.vue +0 -116
  35. package/src/components/core/URadioStd.vue +0 -62
  36. package/src/components/core/USelectStd.vue +0 -250
  37. package/src/components/core/UTabBtnStd.vue +0 -176
  38. package/src/components/core/UTable/UTable.vue +0 -93
  39. package/src/components/core/UTable/UTd.vue +0 -63
  40. package/src/components/core/UTable/UTh.vue +0 -48
  41. package/src/components/core/UTable/UTr.vue +0 -20
  42. package/src/components/core/UTableStd.vue +0 -797
  43. package/src/components/core/UTabsStd.vue +0 -111
  44. package/src/components/core/UToggleStd.vue +0 -159
  45. package/src/components/core/UToolbar.vue +0 -94
  46. package/src/components/core/UTooltip.vue +0 -71
  47. package/src/components/core/UUploader.vue +0 -494
  48. package/src/composables/useNotify.js +0 -79
  49. package/src/composables/useOverlayLoader.js +0 -23
  50. package/src/css/app.sass +0 -159
  51. package/src/css/colors.sass +0 -101
  52. package/src/css/media.sass +0 -1
  53. package/src/css/quasar.variables.sass +0 -119
  54. package/src/css/typography.sass +0 -0
  55. package/src/css/vars/colors.variables.sass +0 -126
  56. package/src/layouts/MainLayout.vue +0 -185
  57. package/src/pages/AdvancedSearch.vue +0 -512
  58. package/src/pages/Avatar.vue +0 -77
  59. package/src/pages/AvatarGroup.vue +0 -139
  60. package/src/pages/BadgeStd.vue +0 -83
  61. package/src/pages/BannerPage.vue +0 -76
  62. package/src/pages/BreadCrumbs.vue +0 -100
  63. package/src/pages/BtnIcon.vue +0 -120
  64. package/src/pages/BtnStd.vue +0 -138
  65. package/src/pages/BtnToggle.vue +0 -131
  66. package/src/pages/CheckBox.vue +0 -62
  67. package/src/pages/Chip.vue +0 -108
  68. package/src/pages/ComponentBase.vue +0 -54
  69. package/src/pages/Dialog.vue +0 -221
  70. package/src/pages/Drawer.vue +0 -128
  71. package/src/pages/ErrorNotFound.vue +0 -11
  72. package/src/pages/IndexPage.vue +0 -11
  73. package/src/pages/InnerLoader.vue +0 -81
  74. package/src/pages/InputAddressLookup.vue +0 -258
  75. package/src/pages/InputPhone.vue +0 -153
  76. package/src/pages/InputText.vue +0 -140
  77. package/src/pages/InputTypeaheadAdvanceSearch.vue +0 -652
  78. package/src/pages/MenuButton.vue +0 -194
  79. package/src/pages/MenuDropdown.vue +0 -84
  80. package/src/pages/MenuItem.vue +0 -68
  81. package/src/pages/MultiSelectStd.vue +0 -174
  82. package/src/pages/NotifyPage.vue +0 -109
  83. package/src/pages/OverlayLoader.vue +0 -128
  84. package/src/pages/Pagination.vue +0 -71
  85. package/src/pages/Radio.vue +0 -80
  86. package/src/pages/RadioBtn.vue +0 -104
  87. package/src/pages/SelectStd.vue +0 -185
  88. package/src/pages/TabButtonPage.vue +0 -137
  89. package/src/pages/TablePage.vue +0 -426
  90. package/src/pages/TabsPage.vue +0 -261
  91. package/src/pages/TogglePage.vue +0 -58
  92. package/src/pages/Toolbar.vue +0 -104
  93. package/src/pages/TooltipPage.vue +0 -125
  94. package/src/pages/Uploader.vue +0 -503
  95. package/src/router/index.js +0 -34
  96. package/src/router/routes.js +0 -161
  97. package/src/utils/data.ts +0 -146
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@usssa/component-library",
3
- "version": "1.0.0-alpha.61",
3
+ "version": "1.0.0-alpha.63",
4
4
  "description": "A Quasar component library project",
5
5
  "productName": "Quasar component library App",
6
6
  "author": "Troy Moreland <troy.moreland@usssa.com>",
7
7
  "main": "src/components/index.js",
8
8
  "files": [
9
- "src",
10
- "README.md"
9
+ "dist/component-library/src",
10
+ "README.md",
11
+ "package.json"
11
12
  ],
12
13
  "publishConfig": {
13
14
  "access": "public"
package/src/App.vue DELETED
@@ -1,9 +0,0 @@
1
- <template>
2
- <router-view />
3
- </template>
4
-
5
- <script setup>
6
- defineOptions({
7
- name: "App",
8
- });
9
- </script>
Binary file
@@ -1,19 +0,0 @@
1
- <svg width="95" height="24" viewBox="0 0 95 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g id="Logo">
3
- <g id="Lettering">
4
- <path d="M3.80408 2.66675H8.95923L4.80595 13.2946L11.6168 13.2333L15.8059 2.66675H20.8L16.7704 12.978C15.8482 15.3379 13.5896 16.889 11.0754 16.889H3.24023L3.23972 16.8853C0.95221 16.7796 -0.597379 14.4417 0.221722 12.2504L3.80408 2.66675Z" fill="#234BA9"/>
5
- <path d="M25.3431 2.66675C24.1871 2.66675 23.1592 3.40891 22.7861 4.5129L22.2017 6.24262L21.3962 8.1931L20.9479 9.20419C20.5153 10.1799 21.2229 11.2814 22.2822 11.2814H30.0955L29.3215 13.3117H19.4306L17.9807 16.8876H30.4658C31.6432 16.8876 32.7118 16.1933 33.199 15.1119L34.01 13.3117H33.9934L34.7674 11.2814H34.7746L35.0296 10.6669C35.5176 9.49105 34.6615 8.1931 33.398 8.1931H26.3902L27.1957 6.24262H36.3783L37.8282 2.66675H25.3431Z" fill="#234BA9"/>
6
- <path d="M65.9075 2.66675C64.7515 2.66675 63.7235 3.40891 63.3505 4.5129L62.7661 6.24262L61.9606 8.1931L61.5123 9.20419C61.0797 10.1799 61.7873 11.2814 62.8466 11.2814H70.6599L69.8859 13.3117H59.995L58.5451 16.8876H71.0302C72.2076 16.8876 73.2762 16.1933 73.7634 15.1119L74.5744 13.3117H74.5578L75.3318 11.2814H75.339L75.594 10.6669C76.0819 9.49105 75.2259 8.1931 73.9624 8.1931H66.9546L67.7601 6.24262H76.9427L78.3926 2.66675H65.9075Z" fill="#234BA9"/>
7
- <path fill-rule="evenodd" clip-rule="evenodd" d="M92.0723 2.66675H80.9702L79.6009 6.24262H89.5386L88.7205 8.27437H81.103C79.3981 8.27437 77.8944 9.40113 77.4017 11.0479L76.8451 12.908C76.2519 14.8906 77.7229 16.8889 79.7755 16.8888L90.3945 16.8883L93.6818 8.51818H93.697L94.5025 6.24262C95.162 4.52034 93.9023 2.66675 92.0723 2.66675ZM81.373 13.3131L82.259 11.2001H87.6558L86.7698 13.3131H81.373Z" fill="#234BA9"/>
8
- </g>
9
- <path id="top" d="M47.7783 0.00113767H62.8782C61.1471 3.8405 58.0313 4.88033 55.3948 4.88033H49.6691V1.41424L47.2456 4.88033H43.464L45.8076 6.95998L43.464 10.3994L47.3255 8.34642L49.6957 10.4794L49.6691 6.95998H54.5426C58.271 6.93332 58.8036 10.4794 58.1378 11.8125H42.7184C41.3069 11.8125 37.1258 10.7724 39.0166 5.76018C40.7743 1.78735 44.982 -0.0524702 47.7783 0.00113767Z" fill="#234BA9"/>
10
- <g id="bottom">
11
- <path d="M32.3588 20.1976C32.705 18.5712 34.7556 15.5317 38.484 15.2917H46.1804C46.3668 15.2917 46.8835 15.2704 47.2456 14.5452L47.7516 13.1987H57.6318C57.2324 14.2741 55.7943 16.5448 52.6518 16.7315H46.5532C46.5 16.7315 45.6899 16.8463 45.3282 17.6913C44.9287 18.6245 44.2097 18.7845 43.8368 18.8111H35.9007C35.2616 18.8378 33.7702 19.0511 32.3588 20.1976Z" fill="#CB2A3D"/>
12
- <path d="M56.1937 16.7181C55.7943 18.3445 53.8875 21.4054 50.0952 21.5973H44.1032C43.5439 21.6507 42.9484 21.7679 42.6118 22.6105C42.2603 23.4904 41.4933 23.7037 40.9873 23.7037H30.8674C31.258 22.6372 32.7902 20.4455 35.7942 20.2109H43.5173C43.7658 20.202 44.2363 20.1842 44.6092 19.3044C44.982 18.4245 45.2217 18.1312 46.0639 18.1046H52.6252C53.1844 18.1135 54.8089 17.838 56.1937 16.7181Z" fill="#CB2A3D"/>
13
- </g>
14
- <g id="shadow">
15
- <path d="M49.7491 13.1987L48.3643 16.7315H46.7132C46.367 16.7493 45.6394 16.9261 45.2985 17.758L46.2871 15.2864C46.4735 15.2784 46.8996 15.1611 47.2192 14.5852L47.7518 13.1987H49.7491Z" fill="#951F23"/>
16
- <path d="M42.6119 22.6114L42.6274 22.5736C42.959 21.7945 43.8175 21.5982 44.2631 21.5982H45.6745L47.0594 18.1055H46.0474C45.1419 18.0788 44.8377 18.6727 44.5747 19.3844C44.4761 19.651 44.1299 20.1538 43.5973 20.2072L42.6274 22.5736C42.6221 22.586 42.617 22.5986 42.6119 22.6114Z" fill="#951F23"/>
17
- </g>
18
- </g>
19
- </svg>
Binary file
@@ -1,15 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
2
- <path
3
- d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
4
- <path fill="#050A14"
5
- d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
6
- <path fill="#00B4FF"
7
- d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
8
- <path fill="#00B4FF"
9
- d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
10
- <path fill="#050A14"
11
- d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
12
- <path fill="#00B4FF"
13
- d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
14
- <path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
15
- </svg>
package/src/boot/.gitkeep DELETED
File without changes
@@ -1,11 +0,0 @@
1
- import { boot } from 'quasar/wrappers'
2
- import VueGoogleMaps from '@fawmi/vue-google-maps'
3
-
4
- export default boot(({ app }) => {
5
- app.use(VueGoogleMaps, {
6
- load: {
7
- key: 'AIzaSyCUda4H5O67XNdBnIwRi3jiYrj41zTRbUk',
8
- libraries: 'places',
9
- },
10
- })
11
- })
@@ -1,26 +0,0 @@
1
- <template>
2
- <q-item clickable :to="path">
3
- <q-item-section class="bg-neutral-4">
4
- <q-item-label class="q-pa-sm">{{ title }}</q-item-label>
5
- </q-item-section>
6
- </q-item>
7
- </template>
8
-
9
- <script>
10
- import { defineComponent } from 'vue'
11
-
12
- export default defineComponent({
13
- name: 'ComponentLink',
14
- props: {
15
- title: {
16
- type: String,
17
- required: true,
18
- },
19
-
20
- path: {
21
- type: String,
22
- default: '/',
23
- },
24
- },
25
- })
26
- </script>
@@ -1,165 +0,0 @@
1
- <script setup>
2
- import { computed } from 'vue'
3
- import UBadgeStd from './UBadgeStd.vue'
4
-
5
- const props = defineProps({
6
- color: {
7
- type: String,
8
- default: 'primary',
9
- },
10
- bgColor: {
11
- type: String,
12
- },
13
- icon: {
14
- type: String,
15
- },
16
- size: {
17
- type: String,
18
- default: 'xl',
19
- },
20
- image: {
21
- type: String,
22
- },
23
- indicatorColor: {
24
- type: String,
25
- default: 'neutral-4',
26
- },
27
- name: {
28
- type: String,
29
- required: true,
30
- },
31
- showIndicator: {
32
- type: Boolean,
33
- default: false,
34
- },
35
- icon: {
36
- type: String,
37
- },
38
- round: {
39
- type: Boolean,
40
- default: true,
41
- },
42
- })
43
-
44
- const emit = defineEmits(['onClick'])
45
-
46
- const handleClick = () => {
47
- return emit('onClick')
48
- }
49
-
50
- const labelSize = computed(() => {
51
- if (props.size === 'sm') {
52
- return 'xs'
53
- }
54
- if (props.size === 'md') {
55
- return 'sm'
56
- }
57
- if (props.size === 'lg') {
58
- return 'md'
59
- }
60
- if (props.size === 'xl') {
61
- return 'lg'
62
- }
63
-
64
- return props.size
65
- })
66
-
67
- const initials = computed(() => {
68
- if (props.name) {
69
- const name = props.name.replace(/\s+/g, ' ')
70
- const parts = name.split(' ')
71
-
72
- if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase()
73
-
74
- return `${parts[0].substring(0, 1).toUpperCase()}${parts[parts.length - 1]
75
- .substring(0, 1)
76
- .toUpperCase()}`
77
- }
78
- return props?.name
79
- })
80
- </script>
81
-
82
- <template>
83
- <q-avatar
84
- class="u-avatar"
85
- :class="`size-${size}`"
86
- :color="bgColor"
87
- :round="round"
88
- :rounded="!round"
89
- :icon="icon"
90
- @click="handleClick"
91
- v-bind="$attrs"
92
- >
93
- <img v-if="image" :src="image" :alt="`avatar ${name}`" :aria-label="name" />
94
- <span
95
- v-if="!image"
96
- class="name"
97
- :class="`text-${color} text-caption-${labelSize}`"
98
- >
99
- {{ initials }}
100
- </span>
101
- <UBadgeStd
102
- v-if="showIndicator"
103
- :color="indicatorColor"
104
- :class="`indicator`"
105
- size="xs"
106
- type="indicator"
107
- />
108
- <slot name="item" />
109
- </q-avatar>
110
- </template>
111
- <style lang="sass">
112
- .u-avatar
113
- position: relative
114
- background: $blue-1
115
-
116
- &.rounded-borders
117
- border-radius: $xxs
118
-
119
- &.size-lg.rounded-borders,&.size-xl.rounded-borders
120
- border-radius: $xs
121
-
122
- &.size-sm
123
- width: $ba
124
- height: $ba
125
-
126
- .indicator
127
- width: $xs
128
- height: $xs
129
-
130
- .q-avatar__content .name
131
- line-height: $xs !important
132
-
133
- &.size-md
134
- width: $ms
135
- height: $ms
136
-
137
- .indicator
138
- width: $xs
139
- height: $xs
140
-
141
- &.size-lg
142
- width: $md
143
- height: $md
144
-
145
- .indicator
146
- width: $sm
147
- height: $sm
148
-
149
- &.size-xl
150
- width: $lg
151
- height: $lg
152
-
153
- .indicator
154
- width: $ba
155
- height: $ba
156
-
157
- .indicator
158
- position: absolute
159
- bottom: 0
160
- right: 0
161
- width: $sm
162
- height: $sm
163
- border: 1.5px solid $neutral-1
164
- background: $neutral-4
165
- </style>
@@ -1,119 +0,0 @@
1
- <script setup>
2
- import { computed } from 'vue'
3
- import UTooltip from './UTooltip.vue'
4
- import UAvatar from './UAvatar.vue'
5
- const props = defineProps({
6
- color: {
7
- type: String,
8
- default: 'primary',
9
- },
10
- icon: {
11
- type: String,
12
- },
13
- size: {
14
- type: String,
15
- },
16
- image: {
17
- type: String,
18
- },
19
- images: {
20
- type: Array,
21
- },
22
- indicatorColor: {
23
- type: String,
24
- default: 'neutral-4',
25
- },
26
- name: {
27
- type: String,
28
- required: true,
29
- },
30
- showIndicator: {
31
- type: Boolean,
32
- default: false,
33
- },
34
- round: {
35
- type: Boolean,
36
- default: true,
37
- },
38
- avatarLimit: {
39
- type: Number,
40
- default: 4,
41
- },
42
- })
43
-
44
- const emit = defineEmits(['onClick'])
45
-
46
- const handleClick = () => {
47
- return emit('onClick')
48
- }
49
-
50
- const displayedAvatars = computed(() => {
51
- return props.images.slice(0, props.avatarLimit)
52
- })
53
- const remainingAvatars = computed(() => {
54
- return props.images.slice(props.avatarLimit)
55
- })
56
- </script>
57
-
58
- <template>
59
- <UAvatar
60
- v-for="(avatar, index) in displayedAvatars"
61
- class="avatarGroup"
62
- :name="avatar.name"
63
- :size="size"
64
- :showIndicator="showIndicator"
65
- :indicatorColor="indicatorColor"
66
- :round="round"
67
- :image="avatar.image"
68
- :key="index"
69
- @click="handleClick"
70
- />
71
-
72
- <q-icon
73
- :class="`avatarGroup additonalUsersAvatar size-${size} fa-duotone fa-solid fa-circle-plus`"
74
- color="primary"
75
- aria-label="See more Avatar"
76
- v-if="remainingAvatars.length"
77
- >
78
- <UTooltip
79
- anchor="bottom middle"
80
- description=""
81
- self="top middle"
82
- :offset="[4, 4]"
83
- >
84
- <template v-slot:item>
85
- <div class="text-body-xs tooltip-text">
86
- <span v-for="(avatar, index) in remainingAvatars" :key="index">
87
- {{ avatar.name }}<br />
88
- </span>
89
- </div>
90
- </template>
91
- </UTooltip>
92
- </q-icon>
93
- </template>
94
- <style lang="sass">
95
- .additonalUsersAvatar:after
96
- background-color: $blue-1
97
- border-radius:50%
98
-
99
- .additonalUsersAvatar
100
- cursor: pointer
101
-
102
- &.size-sm
103
- font-size: $ba !important
104
-
105
- &.size-md
106
- font-size: $ms !important
107
-
108
- &.size-lg
109
- font-size: $md !important
110
-
111
- &.size-xl
112
- font-size: $lg !important
113
-
114
- .avatarGroup
115
- margin: -0.125rem
116
- .avatarGroup:not(:nth-child(1)) .q-avatar__content
117
- border: 1.5px solid $neutral-1
118
- background : lightgray 0px -0.033px / 100% 150.273% no-repeat
119
- </style>
@@ -1,91 +0,0 @@
1
- <script setup>
2
- import { computed } from 'vue'
3
-
4
- const props = defineProps({
5
- color: {
6
- type: String,
7
- default: 'primary',
8
- },
9
- label: {
10
- type: String,
11
- default: '',
12
- },
13
- size: {
14
- type: String,
15
- default: 'md',
16
- validator: (val) => ['xxs', 'xs', 'sm', 'md', 'lg'].includes(val),
17
- },
18
- type: {
19
- type: String,
20
- default: 'basic',
21
- validator: (val) => ['basic', 'indicator'].includes(val),
22
- },
23
- })
24
-
25
- const currentColor = computed(() => {
26
- if (props.color === 'neutral') {
27
- return 'neutral-6'
28
- }
29
- return props.color
30
- })
31
- </script>
32
-
33
- <template>
34
- <q-badge
35
- class="u-badge"
36
- :class="[
37
- type === 'basic' ? 'type-basic' : 'type-indicator justify-center',
38
- `size-${size}`,
39
- type === 'basic'
40
- ? size === 'md'
41
- ? `text-overline-xs`
42
- : `text-overline-sm`
43
- : '',
44
- ]"
45
- :color="currentColor"
46
- rounded
47
- tabindex="0"
48
- :aria-label="label"
49
- >
50
- <div v-if="type === 'basic'">
51
- {{ label }}
52
- </div>
53
- <slot name="default" />
54
- </q-badge>
55
- </template>
56
-
57
- <style lang="sass">
58
- .u-badge
59
- min-height:0px
60
-
61
- &.size-xxs
62
- width: $xs
63
- height: $xs
64
- padding: 0px
65
-
66
- &.size-xs
67
- width: $sm
68
- height: $sm
69
- padding: 0px
70
-
71
- &.size-sm
72
- width: $ba
73
- height: $ba
74
- padding: 0px
75
-
76
- &.size-md
77
- letter-spacing: 0.24px
78
- line-height: 1.013rem
79
-
80
- &.size-lg
81
- width: $md
82
- height: $ms
83
- justify-content: center
84
- line-height: 0
85
-
86
- &.type-basic
87
- border: 1.5px solid $neutral-1
88
-
89
- &.type-indicator
90
- border: 1px solid $neutral-1
91
- </style>
@@ -1,115 +0,0 @@
1
- <script setup>
2
- import UBtnStd from './UBtnStd.vue'
3
-
4
- const props = defineProps({
5
- type: {
6
- type: String,
7
- default: 'info',
8
- },
9
- icon: {
10
- type: String,
11
- default: 'fa-kit-duotone fa-circle-info',
12
- },
13
- message: {
14
- type: String,
15
- default: '',
16
- required: true,
17
- },
18
- show: {
19
- type: Boolean,
20
- default: false,
21
- required: true,
22
- },
23
- primaryActionLabel: {
24
- type: String,
25
- },
26
- secondaryActionLabel: {
27
- type: String,
28
- },
29
- })
30
-
31
- const emit = defineEmits(['primaryAction', 'secondaryAction'])
32
-
33
- const handlePrimaryActionClick = () => {
34
- emit('primaryAction')
35
- }
36
-
37
- const handleSecondaryActionClick = () => {
38
- emit('secondaryAction')
39
- }
40
- </script>
41
-
42
- <template>
43
- <q-banner
44
- v-if="show && message"
45
- inline-actions
46
- :class="`u-banner u-banner-${type} ${!icon ? 'no-padding-label' : ''}`"
47
- tabindex="0"
48
- >
49
- <template v-slot:avatar>
50
- <q-icon
51
- v-if="icon"
52
- aria-label="Banner Icon"
53
- :class="icon"
54
- size="1.5rem"
55
- :color="type"
56
- alt="Banner Info Icon"
57
- />
58
- </template>
59
- <span class="text-caption-lg">{{ message }}</span>
60
- <template v-slot:action>
61
- <u-btn-std
62
- v-if="primaryActionLabel"
63
- :flat="false"
64
- :label="primaryActionLabel"
65
- @onClick="handlePrimaryActionClick"
66
- :color="type"
67
- size="md"
68
- />
69
- <u-btn-std
70
- class="q-ml-sm"
71
- :outline="true"
72
- v-if="secondaryActionLabel"
73
- :label="secondaryActionLabel"
74
- @onClick="handleSecondaryActionClick"
75
- :color="type"
76
- size="md"
77
- />
78
- </template>
79
- </q-banner>
80
- </template>
81
-
82
- <style lang="sass">
83
- .u-banner
84
- min-width: 24.563rem
85
- padding: $sm
86
- .q-banner__avatar
87
- align-self: center
88
-
89
- .q-banner__content
90
- padding-left: $xs !important
91
-
92
- .u-banner-positive
93
- background: $green-1 !important
94
- color: $green-7 !important
95
-
96
- .u-banner-info
97
- background: $purple-1 !important
98
- color: $info !important
99
-
100
- .u-banner-warning
101
- background: $orange-1 !important
102
- color: $orange-7 !important
103
-
104
- .u-banner-accent
105
- background: $red-1 !important
106
- color: $red-7 !important
107
-
108
- .u-banner-primary
109
- background: $blue-1 !important
110
- color: $primary !important
111
-
112
- .no-padding-label
113
- .q-banner__content
114
- padding-left: 0px !important
115
- </style>
@@ -1,67 +0,0 @@
1
- <script setup>
2
- const props = defineProps({
3
- align: {
4
- type: String,
5
- default: 'left',
6
- },
7
- links: {
8
- type: Array,
9
- default: () => [],
10
- },
11
- clickable: {
12
- type: Boolean,
13
- default: true,
14
- },
15
- showActiveRoute: {
16
- type: Boolean,
17
- default: true,
18
- },
19
- activeColor: {
20
- type: String,
21
- default: 'primary',
22
- },
23
- })
24
- </script>
25
- <template>
26
- <q-breadcrumbs
27
- gutter="none"
28
- v-bind="$attrs"
29
- class="u-breadcrumb"
30
- :align="align"
31
- :active-color="activeColor"
32
- >
33
- <q-breadcrumbs-el
34
- v-for="(link, index) of links"
35
- :key="index"
36
- :label="link.label"
37
- :to="link.to"
38
- :class="`breadcrumb-label text-caption-lg ${
39
- index === 0
40
- ? 'q-mr-xs'
41
- : index === links.length - 1
42
- ? 'q-ml-xs'
43
- : 'q-mx-xs'
44
- } ${!showActiveRoute ? 'hide-active-route' : null} ${
45
- !clickable ? 'non-clickable-route' : null
46
- }`"
47
- />
48
- </q-breadcrumbs>
49
- </template>
50
- <style lang="sass">
51
- .u-breadcrumb
52
- .q-breadcrumbs__separator
53
- font-size: 1rem
54
- font-weight: 500
55
- line-height: 1.25rem
56
- letter-spacing: 0.03333rem
57
-
58
- .q-router-link--active
59
- cursor: default
60
-
61
- .hide-active-route
62
- color: $dark !important
63
-
64
- .non-clickable-route
65
- cursor: default !important
66
- pointer-events: none
67
- </style>