@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.
- package/dist/api/QasBox.json +16 -0
- package/dist/api/QasBreakline.json +32 -0
- package/dist/api/QasBtn.json +15 -0
- package/dist/api/QasDebugger.json +13 -0
- package/dist/asteroid.cjs.css +1 -0
- package/dist/asteroid.cjs.js +9154 -0
- package/dist/asteroid.cjs.min.js +6 -0
- package/dist/asteroid.esm.css +1 -0
- package/dist/asteroid.esm.js +9145 -0
- package/dist/asteroid.esm.min.js +6 -0
- package/dist/asteroid.umd.css +1 -0
- package/dist/asteroid.umd.js +9148 -0
- package/dist/asteroid.umd.min.js +6 -0
- package/dist/vetur/asteroid-attributes.json +30 -0
- package/dist/vetur/asteroid-tags.json +29 -0
- package/package.json +42 -56
- package/src/assets/logo-modular.svg +1 -0
- package/src/asteroid.js +1 -0
- package/src/components/actions/QasActions.vue +45 -0
- package/src/components/actions-menu/QasActionsMenu.vue +8 -19
- package/src/components/alert/QasAlert.vue +90 -0
- package/src/components/app-bar/QasAppBar.vue +59 -61
- package/src/components/app-menu/QasAppMenu.vue +128 -41
- package/src/components/avatar/QasAvatar.vue +7 -3
- package/src/components/box/QasBox.vue +12 -4
- package/src/components/box/QasBox.yml +13 -0
- package/src/components/breakline/QasBreakline.vue +37 -0
- package/src/components/breakline/QasBreakline.yml +25 -0
- package/src/components/btn/QasBtn.vue +27 -24
- package/src/components/btn/QasBtn.yml +12 -0
- package/src/components/card/QasCard.vue +29 -21
- package/src/components/checkbox-group/QasCheckboxGroup.vue +31 -17
- package/src/components/copy/QasCopy.vue +22 -11
- package/src/components/date-time-input/QasDateTimeInput.vue +16 -26
- package/src/components/debugger/QasDebugger.vue +2 -0
- package/src/components/debugger/QasDebugger.yml +10 -0
- package/src/components/delete/QasDelete.vue +28 -15
- package/src/components/dialog/QasDialog.vue +71 -67
- package/src/components/dialog-router/QasDialogRouter.vue +12 -4
- package/src/components/field/QasField.vue +22 -25
- package/src/components/filters/QasFilters.vue +31 -24
- package/src/components/form-generator/QasFormGenerator.vue +13 -15
- package/src/components/form-view/QasFormView.vue +117 -66
- package/src/components/gallery/QasGallery.vue +39 -26
- package/src/components/grid-generator/QasGridGenerator.vue +12 -6
- package/src/components/index.js +0 -0
- package/src/components/input/QasInput.vue +38 -36
- package/src/components/label/QasLabel.vue +14 -15
- package/src/components/layout/QasLayout.vue +81 -0
- package/src/components/list-items/QasListItems.vue +16 -8
- package/src/components/list-view/QasListView.vue +31 -28
- package/src/components/map/QasMap.vue +15 -25
- package/src/components/nested-fields/QasNestedFields.vue +39 -36
- package/src/components/numeric-input/QasNumericInput.vue +125 -0
- package/src/components/page-header/QasPageHeader.vue +19 -10
- package/src/components/password-input/QasPasswordInput.vue +20 -18
- package/src/components/password-strength-checker/QasPasswordStrengthChecker.vue +52 -31
- package/src/components/profile/QasProfile.vue +14 -12
- package/src/components/resizer/QasResizer.vue +1 -1
- package/src/components/search-box/QasSearchBox.vue +36 -20
- package/src/components/select/QasSelect.vue +43 -44
- package/src/components/select-list/QasSelectList.vue +64 -51
- package/src/components/signature-pad/QasSignaturePad.vue +57 -41
- package/src/components/signature-uploader/QasSignatureUploader.vue +15 -13
- package/src/components/single-view/QasSingleView.vue +31 -17
- package/src/components/sortable/QasSortable.vue +45 -27
- package/src/components/table-generator/QasTableGenerator.vue +95 -22
- package/src/components/tabs-generator/QasTabsGenerator.vue +36 -24
- package/src/components/text-truncate/QasTextTruncate.vue +25 -17
- package/src/components/transfer/QasTransfer.vue +57 -53
- package/src/components/uploader/QasUploader.vue +169 -48
- package/src/css/background.scss +1 -1
- package/src/css/border.scss +7 -6
- package/src/css/design-system.scss +0 -43
- package/src/css/fonts.scss +2 -28
- package/src/css/opacity.scss +0 -4
- package/src/css/set-brand.scss +15 -0
- package/src/css/transitions.scss +1 -1
- package/src/helpers/add-counter-suffix.js +3 -0
- package/src/helpers/{base64ToBlob.js → base-64-to-blob.js} +0 -0
- package/src/helpers/{constructObject.js → construct-object.js} +0 -0
- package/src/helpers/filter-object.js +8 -6
- package/src/helpers/filters.js +3 -4
- package/src/helpers/get-slot-children-text.js +15 -0
- package/src/helpers/{greatestCommonDivisor.js → greatest-common-divisor.js} +0 -0
- package/src/helpers/images.js +28 -0
- package/src/helpers/index.js +11 -57
- package/src/helpers/is-local-development.js +3 -0
- package/src/helpers/scroll-on-grap.js +61 -0
- package/src/index.cjs.js +1 -0
- package/src/index.esm.js +4 -0
- package/src/index.scss +18 -20
- package/src/index.umd.js +2 -0
- package/src/mixins/context.js +1 -1
- package/src/mixins/dialog-router.js +17 -0
- package/src/mixins/form.js +4 -12
- package/src/mixins/generator.js +14 -14
- package/src/mixins/index.js +2 -8
- package/src/mixins/password.js +73 -11
- package/src/mixins/screen.js +8 -6
- package/src/mixins/view.js +57 -20
- package/src/plugins/Dialog.js +14 -0
- package/src/plugins/NotifySuccess.js +3 -3
- package/src/plugins/index.js +4 -2
- package/src/store/history.js +43 -0
- package/src/store/index.js +1 -0
- package/src/vue-plugin.js +185 -0
- package/.babelrc +0 -12
- package/.storybook/main.js +0 -35
- package/.storybook/preview.js +0 -26
- package/debug.log +0 -1
- package/index.js +0 -4
- package/jest-setup.js +0 -1
- package/jest.config.json +0 -22
- package/postcss.config.js +0 -5
- package/src/components/Introduction.stories.mdx +0 -12
- package/src/components/actions-menu/QasActionsMenu.stories.js +0 -73
- package/src/components/app-bar/QasAppBar.stories.js +0 -88
- package/src/components/app-menu/QasAppMenu.stories.js +0 -62
- package/src/components/apps-menu/QasAppsMenu.spec.js +0 -58
- package/src/components/apps-menu/QasAppsMenu.stories.js +0 -54
- package/src/components/apps-menu/QasAppsMenu.vue +0 -48
- package/src/components/avatar/QasAvatar.spec.js +0 -14
- package/src/components/avatar/QasAvatar.stories.js +0 -52
- package/src/components/box/QasBox.spec.js +0 -18
- package/src/components/box/QasBox.stories.js +0 -35
- package/src/components/break-line/QasBreakLine.stories.js +0 -57
- package/src/components/break-line/QasBreakLine.vue +0 -52
- package/src/components/btn/QasBtn.stories.js +0 -45
- package/src/components/btn-actions/QasBtnActions.stories.js +0 -77
- package/src/components/btn-actions/QasBtnActions.vue +0 -54
- package/src/components/card/QasCard.stories.js +0 -126
- package/src/components/checkbox-group/QasCheckboxGroup.stories.js +0 -59
- package/src/components/copy/QasCopy.stories.js +0 -41
- package/src/components/date-time-input/QasDateTimeInput.stories.js +0 -67
- package/src/components/debugger/QasDebugger.stories.js +0 -33
- package/src/components/decimal-input/QasDecimalInput.stories.js +0 -82
- package/src/components/decimal-input/QasDecimalInput.vue +0 -92
- package/src/components/delete/QasDelete.stories.js +0 -80
- package/src/components/dialog/QasDialog.stories.js +0 -139
- package/src/components/dialog-router/QasDialogRouter.stories.js +0 -38
- package/src/components/field/QasField.stories.js +0 -181
- package/src/components/filters/QasFilters.stories.js +0 -121
- package/src/components/form-generator/QasFormGenerator.stories.js +0 -115
- package/src/components/form-view/QasFormView.stories.js +0 -236
- package/src/components/gallery/QasGallery.stories.js +0 -91
- package/src/components/grid-generator/QasGridGenerator.stories.js +0 -138
- package/src/components/input/QasInput.stories.js +0 -78
- package/src/components/label/QasLabel.stories.js +0 -60
- package/src/components/list-items/QasListItems.stories.js +0 -130
- package/src/components/list-view/QasListView.stories.js +0 -168
- package/src/components/map/QasMap.stories.js +0 -75
- package/src/components/nested-fields/QasNestedFields.stories.js +0 -255
- package/src/components/page-header/QasPageHeader.stories.js +0 -61
- package/src/components/password-input/QasPasswordInput.stories.js +0 -76
- package/src/components/password-strength-checker/QasPasswordStrengthChecker.stories.js +0 -54
- package/src/components/profile/QasProfile.stories.js +0 -131
- package/src/components/resizer/QasResizer.stories.js +0 -43
- package/src/components/search-box/QasSearchBox.stories.js +0 -111
- package/src/components/select/QasSelect.stories.js +0 -113
- package/src/components/select-list/QasSelectList.stories.js +0 -153
- package/src/components/signature-pad/QasSignaturePad.stories.js +0 -51
- package/src/components/signature-uploader/QasSignatureUploader.stories.js +0 -69
- package/src/components/single-view/QasSingleView.stories.js +0 -130
- package/src/components/sortable/QasSortable.stories.js +0 -80
- package/src/components/table-generator/QasTableGenerator.stories.js +0 -116
- package/src/components/tabs-generator/QasTabsGenerator.stories.js +0 -145
- package/src/components/text-truncate/QasTextTruncate.stories.js +0 -55
- package/src/components/tip/QasTip.stories.js +0 -57
- package/src/components/tip/QasTip.vue +0 -68
- package/src/components/tooltip/QasTooltip.stories.js +0 -63
- package/src/components/tooltip/QasTooltip.vue +0 -81
- package/src/components/transfer/QasTransfer.stories.js +0 -118
- package/src/components/uploader/QasCustomUploader.vue +0 -121
- package/src/components/uploader/QasUploader.stories.js +0 -139
- package/src/directives/Test.js +0 -13
- package/src/helpers/historyHandler.js +0 -52
- package/src/helpers/label.js +0 -3
- package/src/index.js +0 -245
- package/src/mixins/map-markers.js +0 -26
- package/src/mixins/unsaved-changes.js +0 -24
- package/src/mixins/uploader.js +0 -30
- package/src/mocks/json/user.json +0 -27
- package/src/mocks/json/users-new.json +0 -23
- package/src/mocks/json/users.json +0 -97
- package/src/mocks/storeModule.js +0 -71
- package/src/pages/Forbidden.vue +0 -6
- 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({})
|