@bildvitta/quasar-ui-asteroid 2.12.4 → 3.0.0-alpha.1

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 (188) hide show
  1. package/dist/api/QasBox.json +16 -0
  2. package/dist/api/QasBreakline.json +32 -0
  3. package/dist/api/QasBtn.json +15 -0
  4. package/dist/api/QasDebugger.json +13 -0
  5. package/dist/asteroid.cjs.css +1 -0
  6. package/dist/asteroid.cjs.js +9154 -0
  7. package/dist/asteroid.cjs.min.js +6 -0
  8. package/dist/asteroid.esm.css +1 -0
  9. package/dist/asteroid.esm.js +9145 -0
  10. package/dist/asteroid.esm.min.js +6 -0
  11. package/dist/asteroid.umd.css +1 -0
  12. package/dist/asteroid.umd.js +9148 -0
  13. package/dist/asteroid.umd.min.js +6 -0
  14. package/dist/vetur/asteroid-attributes.json +30 -0
  15. package/dist/vetur/asteroid-tags.json +29 -0
  16. package/package.json +42 -56
  17. package/src/assets/logo-modular.svg +1 -0
  18. package/src/asteroid.js +1 -0
  19. package/src/components/actions/QasActions.vue +45 -0
  20. package/src/components/actions-menu/QasActionsMenu.vue +8 -19
  21. package/src/components/alert/QasAlert.vue +90 -0
  22. package/src/components/app-bar/QasAppBar.vue +59 -61
  23. package/src/components/app-menu/QasAppMenu.vue +128 -41
  24. package/src/components/avatar/QasAvatar.vue +7 -3
  25. package/src/components/box/QasBox.vue +12 -4
  26. package/src/components/box/QasBox.yml +13 -0
  27. package/src/components/breakline/QasBreakline.vue +37 -0
  28. package/src/components/breakline/QasBreakline.yml +25 -0
  29. package/src/components/btn/QasBtn.vue +27 -24
  30. package/src/components/btn/QasBtn.yml +12 -0
  31. package/src/components/card/QasCard.vue +29 -21
  32. package/src/components/checkbox-group/QasCheckboxGroup.vue +31 -17
  33. package/src/components/copy/QasCopy.vue +22 -11
  34. package/src/components/date-time-input/QasDateTimeInput.vue +16 -26
  35. package/src/components/debugger/QasDebugger.vue +2 -0
  36. package/src/components/debugger/QasDebugger.yml +10 -0
  37. package/src/components/delete/QasDelete.vue +28 -15
  38. package/src/components/dialog/QasDialog.vue +71 -67
  39. package/src/components/dialog-router/QasDialogRouter.vue +12 -4
  40. package/src/components/field/QasField.vue +22 -25
  41. package/src/components/filters/QasFilters.vue +31 -24
  42. package/src/components/form-generator/QasFormGenerator.vue +13 -15
  43. package/src/components/form-view/QasFormView.vue +117 -66
  44. package/src/components/gallery/QasGallery.vue +39 -26
  45. package/src/components/grid-generator/QasGridGenerator.vue +12 -6
  46. package/src/components/index.js +0 -0
  47. package/src/components/input/QasInput.vue +38 -36
  48. package/src/components/label/QasLabel.vue +14 -15
  49. package/src/components/layout/QasLayout.vue +81 -0
  50. package/src/components/list-items/QasListItems.vue +16 -8
  51. package/src/components/list-view/QasListView.vue +31 -28
  52. package/src/components/map/QasMap.vue +15 -25
  53. package/src/components/nested-fields/QasNestedFields.vue +39 -36
  54. package/src/components/numeric-input/QasNumericInput.vue +125 -0
  55. package/src/components/page-header/QasPageHeader.vue +19 -10
  56. package/src/components/password-input/QasPasswordInput.vue +20 -18
  57. package/src/components/password-strength-checker/QasPasswordStrengthChecker.vue +52 -31
  58. package/src/components/profile/QasProfile.vue +14 -12
  59. package/src/components/resizer/QasResizer.vue +1 -1
  60. package/src/components/search-box/QasSearchBox.vue +36 -20
  61. package/src/components/select/QasSelect.vue +43 -44
  62. package/src/components/select-list/QasSelectList.vue +64 -51
  63. package/src/components/signature-pad/QasSignaturePad.vue +57 -41
  64. package/src/components/signature-uploader/QasSignatureUploader.vue +15 -13
  65. package/src/components/single-view/QasSingleView.vue +31 -17
  66. package/src/components/sortable/QasSortable.vue +45 -27
  67. package/src/components/table-generator/QasTableGenerator.vue +95 -22
  68. package/src/components/tabs-generator/QasTabsGenerator.vue +36 -24
  69. package/src/components/text-truncate/QasTextTruncate.vue +25 -17
  70. package/src/components/transfer/QasTransfer.vue +57 -53
  71. package/src/components/uploader/QasUploader.vue +169 -48
  72. package/src/css/background.scss +1 -1
  73. package/src/css/border.scss +7 -6
  74. package/src/css/design-system.scss +0 -43
  75. package/src/css/fonts.scss +2 -28
  76. package/src/css/opacity.scss +0 -4
  77. package/src/css/set-brand.scss +15 -0
  78. package/src/css/transitions.scss +1 -1
  79. package/src/helpers/add-counter-suffix.js +3 -0
  80. package/src/helpers/{base64ToBlob.js → base-64-to-blob.js} +0 -0
  81. package/src/helpers/{constructObject.js → construct-object.js} +0 -0
  82. package/src/helpers/filter-object.js +8 -6
  83. package/src/helpers/filters.js +3 -4
  84. package/src/helpers/get-slot-children-text.js +15 -0
  85. package/src/helpers/{greatestCommonDivisor.js → greatest-common-divisor.js} +0 -0
  86. package/src/helpers/images.js +28 -0
  87. package/src/helpers/index.js +11 -57
  88. package/src/helpers/is-local-development.js +3 -0
  89. package/src/helpers/scroll-on-grap.js +61 -0
  90. package/src/index.cjs.js +1 -0
  91. package/src/index.esm.js +4 -0
  92. package/src/index.scss +18 -20
  93. package/src/index.umd.js +2 -0
  94. package/src/mixins/context.js +1 -1
  95. package/src/mixins/dialog-router.js +17 -0
  96. package/src/mixins/form.js +4 -12
  97. package/src/mixins/generator.js +14 -14
  98. package/src/mixins/index.js +2 -8
  99. package/src/mixins/password.js +73 -11
  100. package/src/mixins/screen.js +8 -6
  101. package/src/mixins/view.js +57 -20
  102. package/src/plugins/Dialog.js +14 -0
  103. package/src/plugins/NotifySuccess.js +3 -3
  104. package/src/plugins/index.js +4 -2
  105. package/src/store/history.js +43 -0
  106. package/src/store/index.js +1 -0
  107. package/src/vue-plugin.js +185 -0
  108. package/.babelrc +0 -12
  109. package/.storybook/main.js +0 -35
  110. package/.storybook/preview.js +0 -26
  111. package/debug.log +0 -1
  112. package/index.js +0 -4
  113. package/jest-setup.js +0 -1
  114. package/jest.config.json +0 -22
  115. package/postcss.config.js +0 -5
  116. package/src/components/Introduction.stories.mdx +0 -12
  117. package/src/components/actions-menu/QasActionsMenu.stories.js +0 -73
  118. package/src/components/app-bar/QasAppBar.stories.js +0 -88
  119. package/src/components/app-menu/QasAppMenu.stories.js +0 -62
  120. package/src/components/apps-menu/QasAppsMenu.spec.js +0 -58
  121. package/src/components/apps-menu/QasAppsMenu.stories.js +0 -54
  122. package/src/components/apps-menu/QasAppsMenu.vue +0 -48
  123. package/src/components/avatar/QasAvatar.spec.js +0 -14
  124. package/src/components/avatar/QasAvatar.stories.js +0 -52
  125. package/src/components/box/QasBox.spec.js +0 -18
  126. package/src/components/box/QasBox.stories.js +0 -35
  127. package/src/components/break-line/QasBreakLine.stories.js +0 -57
  128. package/src/components/break-line/QasBreakLine.vue +0 -52
  129. package/src/components/btn/QasBtn.stories.js +0 -45
  130. package/src/components/btn-actions/QasBtnActions.stories.js +0 -77
  131. package/src/components/btn-actions/QasBtnActions.vue +0 -54
  132. package/src/components/card/QasCard.stories.js +0 -126
  133. package/src/components/checkbox-group/QasCheckboxGroup.stories.js +0 -59
  134. package/src/components/copy/QasCopy.stories.js +0 -41
  135. package/src/components/date-time-input/QasDateTimeInput.stories.js +0 -67
  136. package/src/components/debugger/QasDebugger.stories.js +0 -33
  137. package/src/components/decimal-input/QasDecimalInput.stories.js +0 -82
  138. package/src/components/decimal-input/QasDecimalInput.vue +0 -92
  139. package/src/components/delete/QasDelete.stories.js +0 -80
  140. package/src/components/dialog/QasDialog.stories.js +0 -139
  141. package/src/components/dialog-router/QasDialogRouter.stories.js +0 -38
  142. package/src/components/field/QasField.stories.js +0 -181
  143. package/src/components/filters/QasFilters.stories.js +0 -121
  144. package/src/components/form-generator/QasFormGenerator.stories.js +0 -115
  145. package/src/components/form-view/QasFormView.stories.js +0 -236
  146. package/src/components/gallery/QasGallery.stories.js +0 -91
  147. package/src/components/grid-generator/QasGridGenerator.stories.js +0 -138
  148. package/src/components/input/QasInput.stories.js +0 -78
  149. package/src/components/label/QasLabel.stories.js +0 -60
  150. package/src/components/list-items/QasListItems.stories.js +0 -130
  151. package/src/components/list-view/QasListView.stories.js +0 -168
  152. package/src/components/map/QasMap.stories.js +0 -75
  153. package/src/components/nested-fields/QasNestedFields.stories.js +0 -255
  154. package/src/components/page-header/QasPageHeader.stories.js +0 -61
  155. package/src/components/password-input/QasPasswordInput.stories.js +0 -76
  156. package/src/components/password-strength-checker/QasPasswordStrengthChecker.stories.js +0 -54
  157. package/src/components/profile/QasProfile.stories.js +0 -131
  158. package/src/components/resizer/QasResizer.stories.js +0 -43
  159. package/src/components/search-box/QasSearchBox.stories.js +0 -111
  160. package/src/components/select/QasSelect.stories.js +0 -113
  161. package/src/components/select-list/QasSelectList.stories.js +0 -153
  162. package/src/components/signature-pad/QasSignaturePad.stories.js +0 -51
  163. package/src/components/signature-uploader/QasSignatureUploader.stories.js +0 -69
  164. package/src/components/single-view/QasSingleView.stories.js +0 -130
  165. package/src/components/sortable/QasSortable.stories.js +0 -80
  166. package/src/components/table-generator/QasTableGenerator.stories.js +0 -116
  167. package/src/components/tabs-generator/QasTabsGenerator.stories.js +0 -145
  168. package/src/components/text-truncate/QasTextTruncate.stories.js +0 -55
  169. package/src/components/tip/QasTip.stories.js +0 -57
  170. package/src/components/tip/QasTip.vue +0 -68
  171. package/src/components/tooltip/QasTooltip.stories.js +0 -63
  172. package/src/components/tooltip/QasTooltip.vue +0 -81
  173. package/src/components/transfer/QasTransfer.stories.js +0 -118
  174. package/src/components/uploader/QasCustomUploader.vue +0 -121
  175. package/src/components/uploader/QasUploader.stories.js +0 -139
  176. package/src/directives/Test.js +0 -13
  177. package/src/helpers/historyHandler.js +0 -52
  178. package/src/helpers/label.js +0 -3
  179. package/src/index.js +0 -245
  180. package/src/mixins/map-markers.js +0 -26
  181. package/src/mixins/unsaved-changes.js +0 -24
  182. package/src/mixins/uploader.js +0 -30
  183. package/src/mocks/json/user.json +0 -27
  184. package/src/mocks/json/users-new.json +0 -23
  185. package/src/mocks/json/users.json +0 -97
  186. package/src/mocks/storeModule.js +0 -71
  187. package/src/pages/Forbidden.vue +0 -6
  188. package/src/pages/NotFound.vue +0 -6
@@ -1,51 +0,0 @@
1
- import QasSignaturePad from './QasSignaturePad.vue'
2
-
3
- export default {
4
- component: QasSignaturePad,
5
- title: 'Components/SignaturePad',
6
-
7
- parameters: {
8
- docs: {
9
- description: {
10
- component: 'Extends the [signature_pad](https://github.com/szimek/signature_pad) library.'
11
- }
12
- }
13
- },
14
-
15
- argTypes: {
16
- // Props
17
- options: {
18
- description: 'Options you can pass to customize your component [Signature Pad](https://github.com/szimek/signature_pad#options) options.',
19
- control: 'object'
20
- },
21
-
22
- type: {
23
- description: 'Type of image the generated base64 will have',
24
- sumarry: 'image/png',
25
- control: null
26
- },
27
-
28
- height: {
29
- description: 'Canvas Height.'
30
- },
31
-
32
- isEmpty: {
33
- table: {
34
- disable: true
35
- }
36
- },
37
-
38
- // Events
39
- 'update:isEmpty': {
40
- description: 'Props sent to the component to control it, if the canvas is empty.'
41
- }
42
- }
43
- }
44
-
45
- const Template = (args, { argTypes }) => ({
46
- components: { QasSignaturePad },
47
- props: Object.keys(argTypes),
48
- template: '<qas-signature-pad v-bind="$props" />'
49
- })
50
-
51
- export const Default = Template.bind({})
@@ -1,69 +0,0 @@
1
- import QasSignatureUploader from './QasSignatureUploader.vue'
2
-
3
- export default {
4
- component: QasSignatureUploader,
5
- title: 'Components/SignatureUploader',
6
-
7
- parameters: {
8
- docs: {
9
- description: {
10
- component: 'Extends the QasUploader and QasSignaturePad. Responsible for uploading the generated signature.'
11
- }
12
- }
13
- },
14
-
15
- argTypes: {
16
- // Props
17
- entity: {
18
- description: 'Used by server to know where to store files in the assets bucket.'
19
- },
20
-
21
- uploadLabel: {
22
- description: 'QasUploader header label.'
23
- },
24
-
25
- signatureLabel: {
26
- description: 'Generated signature label.'
27
- },
28
-
29
- value: {
30
- description: 'Model value.'
31
- },
32
-
33
- errorMessage: {
34
- description: 'Error message.'
35
- },
36
-
37
- type: {
38
- description: 'Type of file that the signature is going to be.'
39
- },
40
-
41
- readonly: {
42
- description: 'Disable action buttons.'
43
- },
44
-
45
- // Events
46
- input: {
47
- description: 'Fires when model changes. Is also used by `v-model`.'
48
- }
49
- }
50
- }
51
-
52
- const Template = (args, { argTypes }) => ({
53
- components: { QasSignatureUploader },
54
- props: Object.keys(argTypes),
55
-
56
- data () {
57
- return {
58
- signature: ''
59
- }
60
- },
61
-
62
- template: '<qas-signature-uploader v-model="signature" v-bind="$props" />'
63
- })
64
-
65
- export const Default = Template.bind({})
66
-
67
- Default.args = {
68
- entity: 'posts/image'
69
- }
@@ -1,130 +0,0 @@
1
- import Vuex from 'vuex'
2
- import users from '../../mocks/storeModule'
3
-
4
- import QasDebugger from '../debugger/QasDebugger'
5
- import QasSingleView from './QasSingleView.vue'
6
-
7
- const slotDefaults = {
8
- defaultValue: {
9
- detail: JSON.stringify({
10
- errors: 'object',
11
- fields: 'object',
12
- metadata: 'object',
13
- result: 'object'
14
- }),
15
-
16
- summary: '{}'
17
- },
18
-
19
- type: { summary: null }
20
- }
21
-
22
- export default {
23
- component: QasSingleView,
24
- title: 'Components/SingleView',
25
-
26
- parameters: {
27
- docs: {
28
- description: {
29
- component: 'You can use this component for <strong>view and display</strong> infos.'
30
- }
31
- }
32
- },
33
-
34
- argTypes: {
35
- // Props
36
- customId: {
37
- control: null,
38
- description: 'Sets a custom id to `entity`. When not set, will use the `:id` route param.'
39
- },
40
-
41
- dialog: {
42
- description: 'Use when the component is inside a dialog.'
43
- },
44
-
45
- entity: {
46
- control: null,
47
- description: '[VuexStoreModule](https://github.com/bildvitta/vuex-store-module) entity.'
48
- },
49
-
50
- url: {
51
- control: null,
52
- description: 'Ignore entity and specify another endpoint.'
53
- },
54
-
55
- value: {
56
- description: 'Model value'
57
- },
58
-
59
- // Events
60
- 'fetch-error': {
61
- description: 'Fires when occur an error fetching value.',
62
- table: {
63
- defaultValue: {
64
- detail: JSON.stringify({ error: 'object' }),
65
- summary: '{}'
66
- }
67
- }
68
- },
69
-
70
- 'fetch-success': {
71
- description: 'Fires when successfully get the value.',
72
- table: {
73
- defaultValue: {
74
- detail: JSON.stringify({ response: 'object', value: 'object' }),
75
- summary: '{}'
76
- }
77
- }
78
- },
79
-
80
- input: {
81
- description: 'Fires when successfully get the result.'
82
- },
83
-
84
- // Slots
85
- default: {
86
- description: 'Main content.',
87
- table: slotDefaults
88
- },
89
-
90
- footer: {
91
- description: 'Page\'s footer content.',
92
- table: {
93
- type: { summary: null }
94
- }
95
- },
96
-
97
- header: {
98
- description: 'Page\'s header content.',
99
- table: slotDefaults
100
- }
101
- }
102
- }
103
-
104
- const Template = (args, { argTypes }) => ({
105
- components: { QasDebugger, QasSingleView },
106
- props: Object.keys(argTypes),
107
-
108
- store: new Vuex.Store({
109
- modules: { users }
110
- }),
111
-
112
- template:
113
- `<q-layout>
114
- <q-page-container>
115
- <qas-single-view v-bind="$props">
116
- <template v-slot="{ fields, result }">
117
- Fields: <qas-debugger :inspect="[fields]" />
118
- Results: <qas-debugger :inspect="[result]" />
119
- </template>
120
- </qas-single-view>
121
- </q-page-container>
122
- </q-layout>`
123
- })
124
-
125
- export const Default = Template.bind({})
126
-
127
- Default.args = {
128
- customId: 'a755a6d1-fc4a-4961-a8cc-b2293fe5b81c',
129
- entity: 'users'
130
- }
@@ -1,80 +0,0 @@
1
- import QasSortable from './QasSortable.vue'
2
-
3
- export default {
4
- component: QasSortable,
5
- title: 'Components/Sortable',
6
-
7
- parameters: {
8
- docs: {
9
- description: {
10
- component: 'Sort elements by drag and drop. Uses [SortableJS](https://sortablejs.github.io/Sortable/).'
11
- }
12
- }
13
- },
14
-
15
- argTypes: {
16
- entity: {
17
- description: '[VuexStoreModule](https://github.com/bildvitta/vuex-store-module) entity.'
18
- },
19
-
20
- options: {
21
- description: '[SortableJS](https://sortablejs.github.io/Sortable/) library options.'
22
- },
23
-
24
- results: {
25
- description: 'List of elements to be ordered.'
26
- },
27
-
28
- tag: {
29
- description: 'Component wrapper tag.'
30
- },
31
-
32
- url: {
33
- description: 'Ignore entity and specify another endpoint.'
34
- },
35
-
36
- // Events
37
- sort: {
38
- description: 'Fires when an element is ordered (library\'s native event).'
39
- },
40
-
41
- success: {
42
- description: 'Fires after sorting and API returns success.'
43
- },
44
-
45
- // Slots
46
- default: {
47
- description: 'Returns the array with the ordered data.',
48
- table: {
49
- defaultValue: { summary: '[]' },
50
- type: { summary: '{ sorted: Object }' }
51
- }
52
- }
53
- }
54
- }
55
-
56
- const Template = (args, { argTypes }) => ({
57
- components: { QasSortable },
58
- props: Object.keys(argTypes),
59
-
60
- // TODO template deveria aparecer com a img
61
- template:
62
- `<qas-sortable v-bind="$props" class="flex">
63
- <template v-slot="{ sorted }">
64
- <div v-for="result in sorted" :key="result.id">
65
- <img :src="result.photo" />
66
- </div>
67
- </template>
68
- </qas-sortable>`
69
- })
70
-
71
- export const Default = Template.bind({})
72
-
73
- Default.args = {
74
- options: { animation: 700 },
75
- results: [
76
- { photo: 'https://placehold.it/150/f00', id: '1w312l' },
77
- { photo: 'https://placehold.it/150/0f0', id: '2y927s' },
78
- { photo: 'https://placehold.it/150/00f', id: '3x432q' }
79
- ]
80
- }
@@ -1,116 +0,0 @@
1
- import QasTableGenerator from './QasTableGenerator.vue'
2
-
3
- const hides = {
4
- table: { disable: true }
5
- }
6
-
7
- export default {
8
- component: QasTableGenerator,
9
- title: 'Components/TableGenerator',
10
-
11
- parameters: {
12
- docs: {
13
- description: {
14
- component: 'Extends [QTable](https://quasar.dev/vue-components/table).'
15
- }
16
- }
17
- },
18
-
19
- argTypes: {
20
- // Props
21
- columns: {
22
- description: 'Table columns and order.'
23
- },
24
-
25
- fields: {
26
- description: 'Contain fields data, as `name`, `label` and `type`.',
27
- table: {
28
- defaultValue: { summary: {} }
29
- }
30
- },
31
-
32
- order: hides,
33
-
34
- results: {
35
- description: 'Same keys as fields, but with results.'
36
- },
37
-
38
- rowKey: {
39
- description: 'Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc).'
40
- },
41
-
42
- // Slots
43
- default: hides,
44
-
45
- body: {
46
- description: 'Slot to define how a body row looks like. Suggestion: QTr + Td. Check [QTable](https://quasar.dev/vue-components/table) docs.',
47
- table: {
48
- category: 'slots',
49
- type: { summary: null }
50
- }
51
- },
52
-
53
- 'body-cell-[field.name]': {
54
- description: 'Slot to define how a specific column cell looks like. replace "[field.name]" with column name (from columns definition object). Check [QTable](https://quasar.dev/vue-components/table) docs.',
55
- table: { category: 'slots' }
56
- }
57
- }
58
- }
59
-
60
- const Template = (args, { argTypes }) => ({
61
- components: { QasTableGenerator },
62
- props: Object.keys(argTypes),
63
- template: '<qas-table-generator v-bind="$props" />'
64
- })
65
-
66
- const fields = {
67
- name: { name: 'name', label: 'Full name', type: 'text' },
68
- email: { name: 'email', label: 'E-mail', type: 'email' },
69
- phone: { name: 'phone', label: 'Phone', type: 'text', mask: 'phone' },
70
- gender: { name: 'gender', label: 'Gender', type: 'text' },
71
- document: { name: 'document', label: 'Document', type: 'text', mask: 'document' },
72
- address: { name: 'address', label: 'Address', type: 'text' }
73
- }
74
-
75
- const results = [
76
- {
77
- name: 'John Appleseed 1',
78
- email: 'john.appleseed1@example.com',
79
- phone: '99999999999',
80
- gender: 'male',
81
- document: '99999999999',
82
- address: '747 Austen View'
83
- },
84
- {
85
- name: 'John Appleseed 2',
86
- email: 'john.appleseed2@example.com',
87
- phone: '99999999999',
88
- gender: 'male',
89
- document: '99999999999',
90
- address: '747 Austen View'
91
- },
92
- {
93
- name: 'John Appleseed 3',
94
- email: 'john.appleseed3@example.com',
95
- phone: '99999999999',
96
- gender: 'male',
97
- document: '99999999999',
98
- address: '747 Austen View'
99
- }
100
- ]
101
-
102
- const columns = [
103
- 'name',
104
- 'email',
105
- 'phone',
106
- 'gender',
107
- 'document',
108
- 'address'
109
- ]
110
-
111
- export const Default = Template.bind({})
112
- Default.args = {
113
- columns,
114
- fields,
115
- results
116
- }
@@ -1,145 +0,0 @@
1
- import QasTabsGenerator from './QasTabsGenerator.vue'
2
-
3
- export default {
4
- component: QasTabsGenerator,
5
- title: 'Components/TabsGenerator',
6
-
7
- parameters: {
8
- docs: {
9
- description: {
10
- component: 'Generates tabs dynamically. Implements [QTabs](https://quasar.dev/vue-components/tabs) e [QTab](https://quasar.dev/vue-components/tabs).'
11
- }
12
- }
13
- },
14
-
15
- argTypes: {
16
- // Props
17
- activeColor: {
18
- descritpion: 'The color to be attributed to the text of the active tab.',
19
- default: 'primary'
20
- },
21
-
22
- bgColorClass: {
23
- description: 'The color class to be attributed to the background of tab.',
24
- default: 'transparent'
25
- },
26
-
27
- colorClass: {
28
- description: 'The color class to be attributed to the text of all tabs.',
29
- default: 'text-primary'
30
- },
31
-
32
- counters: {
33
- description: 'Number that will appear on the badge for each tab.'
34
- },
35
-
36
- indicatorColor: {
37
- description: 'The color to be attributed to the indicator (the underline) of the active tab.',
38
- default: 'primary'
39
- },
40
-
41
- tabs: {
42
- description: 'Tabs list.'
43
- },
44
-
45
- value: {
46
- control: null,
47
- description: 'Selected tab.'
48
- },
49
-
50
- // Events
51
- input: {
52
- description: 'Fires when a tab is selected.'
53
- },
54
-
55
- // Slots
56
- default: {
57
- table: { disable: true }
58
- },
59
-
60
- 'tab-[label]': {
61
- description: 'Replace entire tab.',
62
- table: {
63
- category: 'slots',
64
- defaultValue: { summary: null },
65
- type: { summary: JSON.stringify({ item: 'object' }) }
66
- }
67
- },
68
-
69
- 'tab-slot-[label]': {
70
- description: 'Put a tag or a component after [QTab](https://quasar.dev/vue-components/tabs).',
71
- table: {
72
- category: 'slots',
73
- defaultValue: { summary: null },
74
- type: { summary: JSON.stringify({ item: 'object' }) }
75
- }
76
- }
77
- }
78
- }
79
-
80
- const Template = (args, { argTypes }) => ({
81
- components: { QasTabsGenerator },
82
- props: Object.keys(argTypes),
83
- template:
84
- '<qas-tabs-generator v-model="value" v-bind="$props" />'
85
- })
86
-
87
- export const Default = Template.bind({})
88
-
89
- Default.args = {
90
- counters: { tab: 2 },
91
- tabs: { tab1: 'tab1', tab2: 'tab2' }
92
- }
93
-
94
- // Dynamic
95
- const TemplateDynamic = (args, { argTypes }) => ({
96
- components: { QasTabsGenerator },
97
- props: Object.keys(argTypes),
98
- template:
99
- `<qas-tabs-generator class="bg-primary text-white" v-bind="$props" v-model="value">
100
- <template v-slot:tab-tab1>
101
- <div>Now it's a div, not a tab!</div>
102
- </template>
103
- </qas-tabs-generator>`
104
- })
105
-
106
- export const Dynamic = TemplateDynamic.bind({})
107
-
108
- Dynamic.args = {
109
- tabs: { tab1: 'tab1', tab2: 'tab2' }
110
- }
111
-
112
- Dynamic.parameters = {
113
- docs: {
114
- description: {
115
- story: 'Template for a specific tab:'
116
- }
117
- }
118
- }
119
-
120
- // AfterTabSlot
121
- const TemplateAfterTabSlot = (args, { argTypes }) => ({
122
- components: { QasTabsGenerator },
123
- props: Object.keys(argTypes),
124
-
125
- template:
126
- `<qas-tabs-generator v-model="value" v-bind="$props" class="bg-primary text-white">
127
- <template v-slot:tab-slot-tab1>
128
- <div>I'm inside the tab!</div>
129
- </template>
130
- </qas-tabs-generator>`
131
- })
132
-
133
- export const AfterTabSlot = TemplateAfterTabSlot.bind({})
134
-
135
- AfterTabSlot.args = {
136
- tabs: { tab1: 'tab1', tab2: 'tab2' }
137
- }
138
-
139
- AfterTabSlot.parameters = {
140
- docs: {
141
- description: {
142
- story: 'Use after slot to put something, like a badge.'
143
- }
144
- }
145
- }
@@ -1,55 +0,0 @@
1
- import QasTextTruncate from './QasTextTruncate.vue'
2
-
3
- const noSummary = {
4
- type: { summary: null }
5
- }
6
-
7
- export default {
8
- component: QasTextTruncate,
9
- title: 'Components/TextTruncate',
10
-
11
- parameters: {
12
- docs: {
13
- description: {
14
- component: 'Truncate a text based on parent width.'
15
- }
16
- }
17
- },
18
-
19
- argTypes: {
20
- dialog: {
21
- description: 'Events and props of QasDialog component.'
22
- },
23
-
24
- dialogTitle: {
25
- description: 'The title that will be show in the dialog.'
26
- },
27
-
28
- maxWidth: {
29
- description: 'Width that will be used as a delimiter to truncate the text.'
30
- },
31
-
32
- seeMoreLabel: {
33
- description: 'The label that be '
34
- },
35
-
36
- text: {
37
- description: 'The text that will be truncate.'
38
- },
39
-
40
- // Slots
41
-
42
- default: {
43
- description: 'Main content.',
44
- table: noSummary
45
- }
46
- }
47
- }
48
-
49
- const Template = (args, { argTypes }) => ({
50
- components: { QasTextTruncate },
51
- props: Object.keys(argTypes),
52
- template: '<qas-text-truncate dialog-title="Title" v-bind="$props" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " /><template #default>Este <strong>é um texto</strong> que pode começar em negrito.</template></qas-text-truncate>'
53
- })
54
-
55
- export const Default = Template.bind({})
@@ -1,57 +0,0 @@
1
- import QasTip from './QasTip.vue'
2
-
3
- const noSummary = {
4
- type: { summary: null }
5
- }
6
-
7
- export default {
8
- component: QasTip,
9
- title: 'Components/Tip',
10
-
11
- parameters: {
12
- docs: {
13
- description: {
14
- component: 'Creates a section where a warning or message will be shown.'
15
- }
16
- }
17
- },
18
-
19
- argTypes: {
20
- // Props
21
- bgColor: {
22
- description: 'Color name for tip\'s background.'
23
- },
24
-
25
- color: {
26
- description: 'Color name for the content tip.'
27
- },
28
-
29
- text: {
30
- description: 'Text that will be displayed on the tip.'
31
- },
32
-
33
- title: {
34
- description: 'Tip\'s title.'
35
- },
36
-
37
- // Slots
38
- default: {
39
- description: 'Main content.',
40
- table: noSummary
41
- },
42
-
43
- header: {
44
- description: 'Tip\'s header.',
45
- table: noSummary
46
- }
47
-
48
- }
49
- }
50
-
51
- const Template = (args, { argTypes }) => ({
52
- components: { QasTip },
53
- props: Object.keys(argTypes),
54
- template: '<qas-tip v-bind="$props" text="Text example" title="Title" />'
55
- })
56
-
57
- export const Default = Template.bind({})