@bildvitta/quasar-ui-asteroid 3.17.0-beta.26 → 3.17.0-beta.26-alpha.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 (318) hide show
  1. package/package.json +2 -1
  2. package/src/asteroid.js +4 -4
  3. package/src/components/actions/QasActions.vue +81 -81
  4. package/src/components/actions/QasActions.yml +34 -34
  5. package/src/components/actions-menu/QasActionsMenu.vue +251 -251
  6. package/src/components/actions-menu/QasActionsMenu.yml +89 -89
  7. package/src/components/actions-menu/composables/use-delete.js +30 -30
  8. package/src/components/actions-menu/composables/use-double-split-actions.js +42 -42
  9. package/src/components/actions-menu/composables/use-options-actions.js +27 -27
  10. package/src/components/actions-menu/composables/use-single-action.js +17 -17
  11. package/src/components/actions-menu/composables/use-single-split-actions.js +35 -35
  12. package/src/components/actions-menu/composables/use-tooltips.js +43 -43
  13. package/src/components/actions-menu/utils/get-label.js +3 -3
  14. package/src/components/actions-menu/utils/set-click-handler.js +6 -6
  15. package/src/components/alert/QasAlert.test.js +43 -43
  16. package/src/components/alert/QasAlert.vue +110 -110
  17. package/src/components/alert/QasAlert.yml +39 -39
  18. package/src/components/app-bar/QasAppBar.vue +119 -119
  19. package/src/components/app-bar/QasAppBar.yml +44 -44
  20. package/src/components/app-menu/QasAppMenu.vue +441 -392
  21. package/src/components/app-menu/QasAppMenu.yml +73 -73
  22. package/src/components/app-menu/composables/use-app-menu-dropdown.js +71 -71
  23. package/src/components/app-menu/composables/use-app-user.js +49 -49
  24. package/src/components/app-menu/composables/use-development-badge.js +23 -23
  25. package/src/components/app-menu/private/PvAppMenuDropdown.vue +71 -71
  26. package/src/components/app-user/QasAppUser.vue +290 -290
  27. package/src/components/app-user/QasAppUser.yml +56 -56
  28. package/src/components/avatar/QasAvatar.vue +95 -95
  29. package/src/components/avatar/QasAvatar.yml +38 -38
  30. package/src/components/avatar/enums/AvatarColors.js +10 -10
  31. package/src/components/badge/QasBadge.vue +87 -87
  32. package/src/components/badge/QasBadge.yml +55 -55
  33. package/src/components/board-generator/QasBoardGenerator.vue +747 -747
  34. package/src/components/board-generator/QasBoardGenerator.yml +221 -221
  35. package/src/components/box/QasBox.vue +51 -51
  36. package/src/components/box/QasBox.yml +29 -29
  37. package/src/components/breakline/QasBreakline.vue +38 -38
  38. package/src/components/breakline/QasBreakline.yml +25 -25
  39. package/src/components/btn/QasBtn.vue +148 -148
  40. package/src/components/btn/QasBtn.yml +48 -48
  41. package/src/components/btn-dropdown/QasBtnDropdown.vue +146 -146
  42. package/src/components/btn-dropdown/QasBtnDropdown.yml +59 -59
  43. package/src/components/card/QasCard.vue +132 -132
  44. package/src/components/card/QasCard.yml +44 -44
  45. package/src/components/card-image/QasCardImage.vue +95 -95
  46. package/src/components/card-image/QasCardImage.yml +48 -48
  47. package/src/components/chart-view/QasChartView.vue +494 -494
  48. package/src/components/chart-view/QasChartView.yml +115 -115
  49. package/src/components/chart-view/config/charts/bar.js +45 -45
  50. package/src/components/chart-view/config/charts/doughnut.js +43 -43
  51. package/src/components/chart-view/config/charts/index.js +9 -9
  52. package/src/components/chart-view/config/charts/line.js +57 -57
  53. package/src/components/chart-view/config/defaults/colors.js +19 -19
  54. package/src/components/chart-view/config/defaults/font.js +5 -5
  55. package/src/components/chart-view/config/defaults/index.js +2 -2
  56. package/src/components/chart-view/config/index.js +3 -3
  57. package/src/components/chart-view/config/plugins/index.js +3 -3
  58. package/src/components/chart-view/config/plugins/legend.js +9 -9
  59. package/src/components/chart-view/config/plugins/tooltip.js +15 -15
  60. package/src/components/chart-view/config/plugins/zoom.js +31 -31
  61. package/src/components/checkbox/QasCheckbox.vue +150 -150
  62. package/src/components/checkbox/QasCheckbox.yml +36 -36
  63. package/src/components/copy/QasCopy.vue +46 -46
  64. package/src/components/copy/QasCopy.yml +23 -23
  65. package/src/components/date/QasDate.vue +600 -600
  66. package/src/components/date/QasDate.yml +69 -69
  67. package/src/components/date/enums/DateMaskOptions.js +6 -6
  68. package/src/components/date-time-input/QasDateTimeInput.vue +269 -269
  69. package/src/components/date-time-input/QasDateTimeInput.yml +64 -64
  70. package/src/components/debugger/QasDebugger.vue +31 -31
  71. package/src/components/debugger/QasDebugger.yml +10 -10
  72. package/src/components/delete/QasDelete.vue +100 -100
  73. package/src/components/delete/QasDelete.yml +60 -60
  74. package/src/components/dialog/QasDialog.vue +217 -217
  75. package/src/components/dialog/QasDialog.yml +117 -117
  76. package/src/components/dialog/composables/use-cancel.js +40 -40
  77. package/src/components/dialog/composables/use-dynamic-components.js +86 -86
  78. package/src/components/dialog/composables/use-ok.js +45 -45
  79. package/src/components/dialog-router/QasDialogRouter.vue +86 -86
  80. package/src/components/dialog-router/QasDialogRouter.yml +23 -23
  81. package/src/components/drawer/QasDrawer.vue +118 -118
  82. package/src/components/drawer/QasDrawer.yml +58 -58
  83. package/src/components/empty-result-text/QasEmptyResultText.vue +18 -18
  84. package/src/components/empty-result-text/QasEmptyResultText.yml +14 -14
  85. package/src/components/expansion-item/QasExpansionItem.vue +254 -254
  86. package/src/components/expansion-item/QasExpansionItem.yml +71 -71
  87. package/src/components/field/QasField.vue +220 -220
  88. package/src/components/field/QasField.yml +36 -36
  89. package/src/components/filters/QasFilters.vue +472 -472
  90. package/src/components/filters/QasFilters.yml +171 -171
  91. package/src/components/filters/private/PvFiltersButton.vue +101 -101
  92. package/src/components/form-generator/QasFormGenerator.vue +274 -274
  93. package/src/components/form-generator/QasFormGenerator.yml +109 -109
  94. package/src/components/form-view/QasFormView.vue +484 -484
  95. package/src/components/form-view/QasFormView.yml +253 -253
  96. package/src/components/gallery/QasGallery.vue +243 -243
  97. package/src/components/gallery/QasGallery.yml +188 -188
  98. package/src/components/gallery/composables/use-delete.js +54 -54
  99. package/src/components/gallery/private/PvGalleryCarouselDialog.vue +92 -92
  100. package/src/components/gallery/private/PvGalleryDeleteDialog.vue +54 -54
  101. package/src/components/gallery-card/QasGalleryCard.vue +153 -153
  102. package/src/components/gallery-card/QasGalleryCard.yml +61 -61
  103. package/src/components/grabbable/QasGrabbable.vue +185 -185
  104. package/src/components/grabbable/QasGrabbable.yml +26 -26
  105. package/src/components/grid-generator/QasGridGenerator.vue +210 -210
  106. package/src/components/grid-generator/QasGridGenerator.yml +127 -127
  107. package/src/components/grid-item/QasGridItem.vue +89 -89
  108. package/src/components/grid-item/QasGridItem.yml +22 -22
  109. package/src/components/header/QasHeader.vue +152 -152
  110. package/src/components/header/QasHeader.yml +50 -50
  111. package/src/components/infinite-scroll/QasInfiniteScroll.vue +168 -168
  112. package/src/components/infinite-scroll/QasInfiniteScroll.yml +78 -78
  113. package/src/components/info/QasInfo.vue +155 -155
  114. package/src/components/info/QasInfo.yml +34 -34
  115. package/src/components/input/QasInput.vue +252 -252
  116. package/src/components/input/QasInput.yml +65 -65
  117. package/src/components/label/QasLabel.vue +61 -61
  118. package/src/components/label/QasLabel.yml +44 -44
  119. package/src/components/layout/QasLayout.vue +101 -101
  120. package/src/components/layout/QasLayout.yml +46 -46
  121. package/src/components/layout/private/PvLayoutNotificationCard.vue +86 -86
  122. package/src/components/layout/private/PvLayoutNotificationsDrawer.vue +140 -140
  123. package/src/components/list-items/QasListItems.vue +125 -125
  124. package/src/components/list-items/QasListItems.yml +71 -71
  125. package/src/components/list-view/QasListView.vue +304 -304
  126. package/src/components/list-view/QasListView.yml +169 -169
  127. package/src/components/map/QasMap.vue +75 -75
  128. package/src/components/map/QasMap.yml +33 -33
  129. package/src/components/nested-fields/QasNestedFields.vue +584 -584
  130. package/src/components/nested-fields/QasNestedFields.yml +296 -296
  131. package/src/components/numeric-input/QasNumericInput.vue +206 -206
  132. package/src/components/numeric-input/QasNumericInput.yml +85 -85
  133. package/src/components/option-group/QasOptionGroup.vue +54 -54
  134. package/src/components/option-group/QasOptionGroup.yml +30 -30
  135. package/src/components/page-header/QasPageHeader.vue +143 -143
  136. package/src/components/page-header/QasPageHeader.yml +42 -42
  137. package/src/components/pagination/QasPagination.vue +71 -71
  138. package/src/components/pagination/QasPagination.yml +4 -4
  139. package/src/components/password-input/QasPasswordInput.vue +110 -110
  140. package/src/components/password-input/QasPasswordInput.yml +111 -111
  141. package/src/components/password-strength-checker/QasPasswordStrengthChecker.vue +71 -71
  142. package/src/components/password-strength-checker/QasPasswordStrengthChecker.yml +103 -103
  143. package/src/components/profile/QasProfile.vue +98 -98
  144. package/src/components/profile/QasProfile.yml +60 -60
  145. package/src/components/radio/QasRadio.vue +62 -62
  146. package/src/components/radio/QasRadio.yml +11 -11
  147. package/src/components/resizer/QasResizer.vue +90 -90
  148. package/src/components/resizer/QasResizer.yml +24 -24
  149. package/src/components/search-box/QasSearchBox.vue +294 -294
  150. package/src/components/search-box/QasSearchBox.yml +154 -154
  151. package/src/components/search-input/QasSearchInput.vue +106 -106
  152. package/src/components/search-input/QasSearchInput.yml +48 -48
  153. package/src/components/select/QasSelect.vue +514 -514
  154. package/src/components/select/QasSelect.yml +157 -157
  155. package/src/components/select-filter/QasSelectFilter.vue +65 -65
  156. package/src/components/select-filter/QasSelectFilter.yml +36 -36
  157. package/src/components/select-list/QasSelectList.vue +238 -238
  158. package/src/components/select-list/QasSelectList.yml +108 -108
  159. package/src/components/select-list/private/PvSelectListCheckbox.vue +31 -31
  160. package/src/components/select-list-dialog/QasSelectListDialog.vue +395 -395
  161. package/src/components/select-list-dialog/QasSelectListDialog.yml +108 -108
  162. package/src/components/signature-pad/QasSignaturePad.vue +122 -122
  163. package/src/components/signature-pad/QasSignaturePad.yml +53 -53
  164. package/src/components/signature-uploader/QasSignatureUploader.vue +164 -164
  165. package/src/components/signature-uploader/QasSignatureUploader.yml +37 -37
  166. package/src/components/single-view/QasSingleView.vue +175 -175
  167. package/src/components/single-view/QasSingleView.yml +131 -131
  168. package/src/components/sortable/QasSortable.vue +151 -151
  169. package/src/components/sortable/QasSortable.yml +65 -65
  170. package/src/components/status/QasStatus.test.js +11 -11
  171. package/src/components/status/QasStatus.vue +29 -29
  172. package/src/components/status/QasStatus.yml +10 -10
  173. package/src/components/stepper/QasStepper.vue +199 -199
  174. package/src/components/stepper/QasStepper.yml +35 -35
  175. package/src/components/stepper-form-view/QasStepperFormView.vue +86 -86
  176. package/src/components/stepper-form-view/QasStepperFormView.yml +58 -58
  177. package/src/components/table-generator/QasTableGenerator.vue +416 -416
  178. package/src/components/table-generator/QasTableGenerator.yml +94 -94
  179. package/src/components/tabs-generator/QasTabsGenerator.vue +196 -196
  180. package/src/components/tabs-generator/QasTabsGenerator.yml +53 -53
  181. package/src/components/text-truncate/QasTextTruncate.vue +274 -274
  182. package/src/components/text-truncate/QasTextTruncate.yml +60 -60
  183. package/src/components/timeline/QasTimeline.vue +140 -140
  184. package/src/components/timeline/QasTimeline.yml +36 -36
  185. package/src/components/toggle/QasToggle.vue +14 -14
  186. package/src/components/toggle/QasToggle.yml +5 -5
  187. package/src/components/toggle-visibility/QasToggleVisibility.vue +79 -79
  188. package/src/components/toggle-visibility/QasToggleVisibility.yml +30 -30
  189. package/src/components/transfer/QasTransfer.vue +239 -239
  190. package/src/components/transfer/QasTransfer.yml +60 -60
  191. package/src/components/tree-generator/QasTreeForm.vue +62 -62
  192. package/src/components/tree-generator/QasTreeGenerator.vue +488 -488
  193. package/src/components/tree-generator/QasTreeGenerator.yml +81 -81
  194. package/src/components/uploader/QasUploader.vue +691 -691
  195. package/src/components/uploader/QasUploader.yml +206 -206
  196. package/src/components/uploader/private/PvUploaderGalleryCard.vue +357 -357
  197. package/src/components/welcome/QasWelcome.vue +125 -125
  198. package/src/components/welcome/QasWelcome.yml +23 -23
  199. package/src/components/welcome/private/PvWelcomeShortcutCard.vue +58 -58
  200. package/src/components/whatsapp-link/QasWhatsappLink.vue +34 -34
  201. package/src/components/whatsapp-link/QasWhatsappLink.yml +18 -18
  202. package/src/composables/index.js +10 -10
  203. package/src/composables/private/index.js +3 -3
  204. package/src/composables/private/use-auth-user.js +17 -0
  205. package/src/composables/private/use-generator.js +174 -174
  206. package/src/composables/private/use-toggle-visibility.js +48 -48
  207. package/src/composables/private/use-view.js +186 -186
  208. package/src/composables/use-context.js +15 -15
  209. package/src/composables/use-default-filters.js +106 -106
  210. package/src/composables/use-form.js +32 -32
  211. package/src/composables/use-history.js +46 -46
  212. package/src/composables/use-notifications.js +128 -128
  213. package/src/composables/use-query-cache.js +60 -60
  214. package/src/composables/use-screen.js +42 -42
  215. package/src/css/base/font-face.scss +28 -28
  216. package/src/css/base/index.scss +1 -1
  217. package/src/css/components/base.scss +12 -12
  218. package/src/css/components/button.scss +116 -116
  219. package/src/css/components/checkbox.scss +14 -14
  220. package/src/css/components/editor.scss +7 -7
  221. package/src/css/components/field.scss +88 -88
  222. package/src/css/components/index.scss +10 -10
  223. package/src/css/components/item.scss +52 -52
  224. package/src/css/components/radio.scss +18 -18
  225. package/src/css/components/scrollbar.scss +20 -20
  226. package/src/css/components/tabs.scss +3 -3
  227. package/src/css/components/toggle.scss +13 -13
  228. package/src/css/mixins/index.scss +3 -3
  229. package/src/css/mixins/set-brand.scss +15 -15
  230. package/src/css/mixins/set-button.scss +26 -26
  231. package/src/css/mixins/set-typography.scss +8 -8
  232. package/src/css/plugins/index.scss +2 -2
  233. package/src/css/plugins/loading.scss +5 -5
  234. package/src/css/plugins/notify.scss +100 -100
  235. package/src/css/utils/background.scss +34 -34
  236. package/src/css/utils/border-radius.scss +29 -29
  237. package/src/css/utils/border.scss +42 -42
  238. package/src/css/utils/container.scss +36 -36
  239. package/src/css/utils/fonts.scss +5 -5
  240. package/src/css/utils/index.scss +10 -10
  241. package/src/css/utils/line-height.scss +19 -19
  242. package/src/css/utils/opacity.scss +5 -5
  243. package/src/css/utils/scroll.scss +21 -21
  244. package/src/css/utils/text.scss +15 -15
  245. package/src/css/utils/unset.scss +8 -8
  246. package/src/css/variables/button.scss +4 -4
  247. package/src/css/variables/index.scss +6 -6
  248. package/src/css/variables/scrollbar.scss +11 -11
  249. package/src/css/variables/separator.scss +2 -2
  250. package/src/css/variables/shadow.scss +3 -3
  251. package/src/css/variables/spacing.scss +98 -98
  252. package/src/css/variables/typography.scss +149 -149
  253. package/src/directives/Test.js +13 -13
  254. package/src/enums/Align.js +7 -7
  255. package/src/enums/Spacing.js +98 -98
  256. package/src/enums/Status.js +33 -33
  257. package/src/helpers/add-counter-suffix.js +3 -3
  258. package/src/helpers/base-64-to-blob.js +21 -21
  259. package/src/helpers/camelize-fields-name.js +15 -15
  260. package/src/helpers/construct-object.js +29 -29
  261. package/src/helpers/copy-to-clipboard.js +15 -15
  262. package/src/helpers/destroy-nested-children-by-key.js +33 -33
  263. package/src/helpers/download-file.js +21 -21
  264. package/src/helpers/filter-list-by-handle.js +31 -31
  265. package/src/helpers/filter-object-to-array.js +29 -29
  266. package/src/helpers/filter-object.js +34 -34
  267. package/src/helpers/filters.js +163 -163
  268. package/src/helpers/find-children-by-key.js +14 -14
  269. package/src/helpers/get-greatest-common-divisor.js +16 -16
  270. package/src/helpers/get-normalized-options.js +20 -20
  271. package/src/helpers/get-placeholder.js +19 -19
  272. package/src/helpers/get-required-label.js +3 -3
  273. package/src/helpers/get-slot-children-text.js +15 -15
  274. package/src/helpers/handle-process.js +13 -13
  275. package/src/helpers/images.js +28 -28
  276. package/src/helpers/index.js +25 -25
  277. package/src/helpers/is-empty.js +3 -3
  278. package/src/helpers/is-local-development.js +3 -3
  279. package/src/helpers/private/gutter-validator.js +15 -15
  280. package/src/helpers/private/has-parent-by-class-name.js +15 -15
  281. package/src/helpers/promise-handler.js +40 -40
  282. package/src/helpers/rules.js +7 -7
  283. package/src/helpers/set-scroll-on-grab.js +128 -128
  284. package/src/index.cjs.js +1 -1
  285. package/src/index.esm.js +4 -4
  286. package/src/index.scss +38 -38
  287. package/src/index.umd.js +2 -2
  288. package/src/mixins/context.js +8 -8
  289. package/src/mixins/delete.js +48 -48
  290. package/src/mixins/dialog-router.js +17 -17
  291. package/src/mixins/form.js +11 -11
  292. package/src/mixins/generator.js +94 -94
  293. package/src/mixins/index.js +17 -17
  294. package/src/mixins/password.js +86 -86
  295. package/src/mixins/search-filter.js +354 -354
  296. package/src/mixins/view.js +156 -156
  297. package/src/pages/ErrorComponent.vue +74 -74
  298. package/src/pages/Forbidden.vue +29 -29
  299. package/src/pages/NotFound.vue +29 -29
  300. package/src/pages/ServerError.vue +29 -29
  301. package/src/pages/Unauthorized.vue +29 -29
  302. package/src/plugins/delete/Delete.js +107 -107
  303. package/src/plugins/delete/Delete.yml +75 -75
  304. package/src/plugins/dialog/Dialog.js +14 -14
  305. package/src/plugins/dialog/Dialog.yml +10 -10
  306. package/src/plugins/index.js +13 -13
  307. package/src/plugins/notify-error/NotifyError.js +13 -13
  308. package/src/plugins/notify-error/NotifyError.yml +11 -11
  309. package/src/plugins/notify-success/NotifySuccess.js +13 -13
  310. package/src/plugins/notify-success/NotifySuccess.yml +11 -11
  311. package/src/plugins/screen/Screen.js +35 -35
  312. package/src/plugins/screen/Screen.yml +16 -16
  313. package/src/shared/date-config.js +26 -26
  314. package/src/shared/fuse-config.js +4 -4
  315. package/src/shared/notify-config.js +7 -7
  316. package/src/vue-plugin/third-party-component-handler.js +29 -29
  317. package/src/vue-plugin.js +285 -285
  318. package/src/components/app-menu/private/PvAppMenuHelpChat.vue +0 -222
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bildvitta/quasar-ui-asteroid",
3
3
  "description": "Asteroid",
4
- "version": "3.17.0-beta.26",
4
+ "version": "3.17.0-beta.26-alpha.0",
5
5
  "author": "Bild & Vitta <systemteam@bild.com.br>",
6
6
  "license": "MIT",
7
7
  "main": "dist/asteroid.cjs.min.js",
@@ -50,6 +50,7 @@
50
50
  "date-fns": "^2.30.0",
51
51
  "debug": "^4.3.4",
52
52
  "fuse.js": "^6.6.2",
53
+ "gleap": "^14.2.5",
53
54
  "humps": "^2.0.1",
54
55
  "lodash-es": "^4.17.21",
55
56
  "pica": "^9.0.1",
package/src/asteroid.js CHANGED
@@ -1,4 +1,4 @@
1
- export * from './helpers'
2
- export * from './mixins'
3
- export * from './vue-plugin'
4
- export * from './composables'
1
+ export * from './helpers'
2
+ export * from './mixins'
3
+ export * from './vue-plugin'
4
+ export * from './composables'
@@ -1,81 +1,81 @@
1
- <template>
2
- <div class="q-mt-sm" :class="classes">
3
- <div v-if="hasTertiarySlot" :class="columnClasses">
4
- <slot name="tertiary" />
5
- </div>
6
-
7
- <div v-if="hasSecondarySlot" :class="columnClasses">
8
- <slot name="secondary" />
9
- </div>
10
-
11
- <div v-if="hasPrimarySlot" :class="columnClasses">
12
- <slot name="primary" />
13
- </div>
14
- </div>
15
- </template>
16
-
17
- <script setup>
18
- import useScreen from '../../composables/use-screen'
19
- import { FlexAlign } from '../../enums/Align'
20
- import { Spacing } from '../../enums/Spacing'
21
-
22
- import { computed, useSlots } from 'vue'
23
-
24
- defineOptions({ name: 'QasActions' })
25
-
26
- const props = defineProps({
27
- align: {
28
- default: FlexAlign.End,
29
- type: String,
30
- validator: value => Object.values(FlexAlign).includes(value)
31
- },
32
-
33
- gutter: {
34
- default: '',
35
- type: String,
36
- validator: value => !value || Object.values(Spacing).includes(value)
37
- },
38
-
39
- useFullWidth: {
40
- type: Boolean
41
- },
42
-
43
- useEqualWidth: {
44
- type: Boolean
45
- }
46
- })
47
-
48
- const slots = useSlots()
49
- const screen = useScreen()
50
-
51
- const defaultGutter = computed(() => {
52
- return props.gutter || (screen.isSmall ? 'md' : 'lg')
53
- })
54
-
55
- const classes = computed(() => {
56
- const isSmallOrFullWidth = screen.isSmall || props.useFullWidth
57
-
58
- return [
59
- !screen.isSmall && 'items-center',
60
-
61
- // alinhamento
62
- `justify-${props.align}`,
63
-
64
- // espaçamento
65
- `q-col-gutter-${defaultGutter.value}`,
66
-
67
- // disposição
68
- isSmallOrFullWidth ? 'column reverse' : 'row'
69
- ]
70
- })
71
-
72
- const columnClasses = computed(() => {
73
- if (props.useEqualWidth) return 'col-12 col-sm-6'
74
-
75
- return props.useFullWidth ? 'full-width' : 'col-12 col-sm-auto'
76
- })
77
-
78
- const hasPrimarySlot = computed(() => !!slots.primary)
79
- const hasSecondarySlot = computed(() => !!slots.secondary)
80
- const hasTertiarySlot = computed(() => !!slots.tertiary)
81
- </script>
1
+ <template>
2
+ <div class="q-mt-sm" :class="classes">
3
+ <div v-if="hasTertiarySlot" :class="columnClasses">
4
+ <slot name="tertiary" />
5
+ </div>
6
+
7
+ <div v-if="hasSecondarySlot" :class="columnClasses">
8
+ <slot name="secondary" />
9
+ </div>
10
+
11
+ <div v-if="hasPrimarySlot" :class="columnClasses">
12
+ <slot name="primary" />
13
+ </div>
14
+ </div>
15
+ </template>
16
+
17
+ <script setup>
18
+ import useScreen from '../../composables/use-screen'
19
+ import { FlexAlign } from '../../enums/Align'
20
+ import { Spacing } from '../../enums/Spacing'
21
+
22
+ import { computed, useSlots } from 'vue'
23
+
24
+ defineOptions({ name: 'QasActions' })
25
+
26
+ const props = defineProps({
27
+ align: {
28
+ default: FlexAlign.End,
29
+ type: String,
30
+ validator: value => Object.values(FlexAlign).includes(value)
31
+ },
32
+
33
+ gutter: {
34
+ default: '',
35
+ type: String,
36
+ validator: value => !value || Object.values(Spacing).includes(value)
37
+ },
38
+
39
+ useFullWidth: {
40
+ type: Boolean
41
+ },
42
+
43
+ useEqualWidth: {
44
+ type: Boolean
45
+ }
46
+ })
47
+
48
+ const slots = useSlots()
49
+ const screen = useScreen()
50
+
51
+ const defaultGutter = computed(() => {
52
+ return props.gutter || (screen.isSmall ? 'md' : 'lg')
53
+ })
54
+
55
+ const classes = computed(() => {
56
+ const isSmallOrFullWidth = screen.isSmall || props.useFullWidth
57
+
58
+ return [
59
+ !screen.isSmall && 'items-center',
60
+
61
+ // alinhamento
62
+ `justify-${props.align}`,
63
+
64
+ // espaçamento
65
+ `q-col-gutter-${defaultGutter.value}`,
66
+
67
+ // disposição
68
+ isSmallOrFullWidth ? 'column reverse' : 'row'
69
+ ]
70
+ })
71
+
72
+ const columnClasses = computed(() => {
73
+ if (props.useEqualWidth) return 'col-12 col-sm-6'
74
+
75
+ return props.useFullWidth ? 'full-width' : 'col-12 col-sm-auto'
76
+ })
77
+
78
+ const hasPrimarySlot = computed(() => !!slots.primary)
79
+ const hasSecondarySlot = computed(() => !!slots.secondary)
80
+ const hasTertiarySlot = computed(() => !!slots.tertiary)
81
+ </script>
@@ -1,34 +1,34 @@
1
- type: component
2
-
3
- meta:
4
- desc: Área de ações para páginas que lidam com botões primários e secundários, como um formulário ou caixa de diálogo.
5
-
6
- props:
7
- align:
8
- desc: Alinhamento dos elementos.
9
- default: end
10
- type: String
11
- examples: [start, end, between, around, center]
12
-
13
- gutter:
14
- desc: Espaçamento entre os elementos.
15
- default: lg
16
- type: String
17
- examples: ['xs', 'sm', 'md', 'lg', 'xl']
18
-
19
- use-full-width:
20
- desc: Deixa as colunas 100%, com col-12.
21
- default: false
22
- type: Boolean
23
-
24
- use-equal-width:
25
- desc: Deixa as colunas 50% no desktop e 100% no mobile, col-12 col-sm-6.
26
- default: false
27
- type: Boolean
28
-
29
- slots:
30
- primary:
31
- desc: 'Slot para ação primaria (ex: botão de salvar), em telas menores que sm, se torna o primeiro elemento.'
32
-
33
- secondary:
34
- desc: 'Slot para ação secundaria (ex: botão de cancelar), em telas menores que sm, se torna o segundo elemento.'
1
+ type: component
2
+
3
+ meta:
4
+ desc: Área de ações para páginas que lidam com botões primários e secundários, como um formulário ou caixa de diálogo.
5
+
6
+ props:
7
+ align:
8
+ desc: Alinhamento dos elementos.
9
+ default: end
10
+ type: String
11
+ examples: [start, end, between, around, center]
12
+
13
+ gutter:
14
+ desc: Espaçamento entre os elementos.
15
+ default: lg
16
+ type: String
17
+ examples: ['xs', 'sm', 'md', 'lg', 'xl']
18
+
19
+ use-full-width:
20
+ desc: Deixa as colunas 100%, com col-12.
21
+ default: false
22
+ type: Boolean
23
+
24
+ use-equal-width:
25
+ desc: Deixa as colunas 50% no desktop e 100% no mobile, col-12 col-sm-6.
26
+ default: false
27
+ type: Boolean
28
+
29
+ slots:
30
+ primary:
31
+ desc: 'Slot para ação primaria (ex: botão de salvar), em telas menores que sm, se torna o primeiro elemento.'
32
+
33
+ secondary:
34
+ desc: 'Slot para ação secundaria (ex: botão de cancelar), em telas menores que sm, se torna o segundo elemento.'