@saasmakers/ui 1.4.36 → 1.4.38

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 (41) hide show
  1. package/app/components/bases/BaseButton.vue +1 -2
  2. package/app/components/bases/BaseMessage.vue +1 -1
  3. package/app/components/bases/BaseMetric.vue +2 -2
  4. package/app/components/fields/FieldSelect.vue +2 -2
  5. package/app/types/global.d.ts +0 -2
  6. package/nuxt.config.ts +0 -1
  7. package/package.json +11 -14
  8. package/app/components/bases/BaseAlert.stories.ts +0 -42
  9. package/app/components/bases/BaseAvatar.stories.ts +0 -18
  10. package/app/components/bases/BaseBordered.stories.ts +0 -22
  11. package/app/components/bases/BaseButton.stories.ts +0 -81
  12. package/app/components/bases/BaseCharacter.stories.ts +0 -31
  13. package/app/components/bases/BaseChart.stories.ts +0 -20
  14. package/app/components/bases/BaseDivider.stories.ts +0 -36
  15. package/app/components/bases/BaseEmoji.stories.ts +0 -28
  16. package/app/components/bases/BaseHeading.stories.ts +0 -49
  17. package/app/components/bases/BaseIcon.stories.ts +0 -56
  18. package/app/components/bases/BaseMessage.stories.ts +0 -35
  19. package/app/components/bases/BaseMetric.stories.ts +0 -39
  20. package/app/components/bases/BaseOverlay.stories.ts +0 -30
  21. package/app/components/bases/BaseParagraph.stories.ts +0 -36
  22. package/app/components/bases/BasePower.stories.ts +0 -58
  23. package/app/components/bases/BaseQuote.stories.ts +0 -63
  24. package/app/components/bases/BaseShortcut.stories.ts +0 -24
  25. package/app/components/bases/BaseSpinner.stories.ts +0 -42
  26. package/app/components/bases/BaseTag.stories.ts +0 -44
  27. package/app/components/bases/BaseTags.stories.ts +0 -42
  28. package/app/components/bases/BaseText.stories.ts +0 -47
  29. package/app/components/bases/BaseToast.stories.ts +0 -70
  30. package/app/components/fields/FieldAvatar.stories.ts +0 -37
  31. package/app/components/fields/FieldCheckbox.stories.ts +0 -36
  32. package/app/components/fields/FieldDays.stories.ts +0 -10
  33. package/app/components/fields/FieldEmojis.stories.ts +0 -10
  34. package/app/components/fields/FieldInput.stories.ts +0 -100
  35. package/app/components/fields/FieldLabel.stories.ts +0 -30
  36. package/app/components/fields/FieldMessage.stories.ts +0 -22
  37. package/app/components/fields/FieldSelect.stories.ts +0 -73
  38. package/app/components/fields/FieldTabs.stories.ts +0 -44
  39. package/app/components/fields/FieldTextarea.stories.ts +0 -44
  40. package/app/components/fields/FieldTime.stories.ts +0 -37
  41. package/app/components/layout/LayoutToasts.stories.ts +0 -8
@@ -1,36 +0,0 @@
1
- import BaseParagraph from './BaseParagraph.vue'
2
-
3
- export default {
4
- component: BaseParagraph,
5
- title: 'Bases/BaseParagraph',
6
-
7
- argTypes: {
8
- alignment: {
9
- control: 'select',
10
- options: [
11
- 'center',
12
- 'left',
13
- 'right',
14
- ] satisfies BaseParagraphAlignment[],
15
- },
16
- size: {
17
- control: 'select',
18
- options: [
19
- 'sm',
20
- 'base',
21
- 'lg',
22
- ] satisfies BaseParagraphSize[],
23
- },
24
- },
25
- } satisfies Meta<typeof BaseParagraph>
26
-
27
- export const Default: StoryObj<typeof BaseParagraph> = {
28
- args: {},
29
- render: args => ({
30
- components: { BaseParagraph },
31
- setup() {
32
- return { args }
33
- },
34
- template: '<BaseParagraph v-bind="args">This is a paragraph text.</BaseParagraph>',
35
- }),
36
- }
@@ -1,58 +0,0 @@
1
- import BasePower from './BasePower.vue'
2
-
3
- export default {
4
- component: BasePower,
5
- title: 'Bases/BasePower',
6
-
7
- argTypes: {
8
- power: {
9
- control: 'select',
10
- options: [
11
- '401',
12
- '404',
13
- '500',
14
- 'angry',
15
- 'bag',
16
- 'bank',
17
- 'book',
18
- 'browser',
19
- 'chair',
20
- 'christmas',
21
- 'city',
22
- 'city-bis',
23
- 'coffee',
24
- 'computer-book',
25
- 'computer-coffee',
26
- 'dead',
27
- 'easter',
28
- 'hourglass',
29
- 'invite',
30
- 'ko',
31
- 'love',
32
- 'magic',
33
- 'popcorn',
34
- 'radar',
35
- 'rocket',
36
- 'smiling',
37
- 'social-networks',
38
- 'starwars',
39
- 'teach',
40
- 'typewriter',
41
- 'website',
42
- 'welcome',
43
- 'writer',
44
- ] satisfies BasePowerPower[],
45
- },
46
- size: {
47
- control: 'select',
48
- options: [
49
- 'xs',
50
- 'sm',
51
- 'base',
52
- 'lg',
53
- ] satisfies BasePowerSize[],
54
- },
55
- },
56
- } satisfies Meta<typeof BasePower>
57
-
58
- export const Default: StoryObj<typeof BasePower> = { args: { power: 'rocket' } satisfies Partial<BasePower> }
@@ -1,63 +0,0 @@
1
- import BaseQuote from './BaseQuote.vue'
2
-
3
- export default {
4
- component: BaseQuote,
5
- title: 'Bases/BaseQuote',
6
-
7
- argTypes: {
8
- background: {
9
- control: 'select',
10
- options: [
11
- 'gray',
12
- 'gray-light',
13
- 'white',
14
- ] satisfies BaseQuoteBackground[],
15
- },
16
- character: {
17
- control: 'select',
18
- options: [
19
- 'anthony',
20
- 'julien',
21
- 'mathieu',
22
- 'nada',
23
- 'power',
24
- 'yoda',
25
- ] satisfies BaseCharacterCharacter[],
26
- },
27
- clickable: { control: 'boolean' },
28
- closingId: { control: 'text' },
29
- forceSlot: { control: 'boolean' },
30
- hasClose: { control: 'boolean' },
31
- hideCharacterOnMobile: { control: 'boolean' },
32
- noMargin: { control: 'boolean' },
33
- reverse: { control: 'boolean' },
34
- size: {
35
- control: 'select',
36
- options: [
37
- 'xs',
38
- 'sm',
39
- 'base',
40
- ] satisfies BaseQuoteSize[],
41
- },
42
- status: {
43
- control: 'select',
44
- options: [
45
- 'error',
46
- 'info',
47
- 'success',
48
- 'warning',
49
- ] satisfies BaseStatus[],
50
- },
51
- },
52
- } satisfies Meta<typeof BaseQuote>
53
-
54
- export const Default: StoryObj<typeof BaseQuote> = {
55
- args: {},
56
- render: args => ({
57
- components: { BaseQuote },
58
- setup() {
59
- return { args }
60
- },
61
- template: '<BaseQuote v-bind="args">This is a quote text.</BaseQuote>',
62
- }),
63
- }
@@ -1,24 +0,0 @@
1
- import BaseShortcut from './BaseShortcut.vue'
2
-
3
- export default {
4
- component: BaseShortcut,
5
- title: 'Bases/BaseShortcut',
6
-
7
- argTypes: {
8
- active: { control: 'boolean' },
9
- shortcut: { control: 'text' },
10
- },
11
- } satisfies Meta<typeof BaseShortcut>
12
-
13
- export const Enter: StoryObj<typeof BaseShortcut> = { args: { shortcut: 'Enter' } satisfies Partial<BaseShortcut> }
14
-
15
- export const Letter: StoryObj<typeof BaseShortcut> = { args: { shortcut: 'y' } satisfies Partial<BaseShortcut> }
16
-
17
- export const Escape: StoryObj<typeof BaseShortcut> = { args: { shortcut: 'Escape' } satisfies Partial<BaseShortcut> }
18
-
19
- export const Inactive: StoryObj<typeof BaseShortcut> = {
20
- args: {
21
- active: false,
22
- shortcut: 'Enter',
23
- } satisfies Partial<BaseShortcut>,
24
- }
@@ -1,42 +0,0 @@
1
- import BaseSpinner from './BaseSpinner.vue'
2
-
3
- export default {
4
- component: BaseSpinner,
5
- title: 'Bases/BaseSpinner',
6
-
7
- argTypes: {
8
- clickable: { control: 'boolean' },
9
- color: {
10
- control: 'select',
11
- options: [
12
- 'black',
13
- 'gray',
14
- 'green',
15
- 'indigo',
16
- 'orange',
17
- 'red',
18
- 'white',
19
- ] satisfies BaseColor[],
20
- },
21
- id: { control: 'text' },
22
- reverse: { control: 'boolean' },
23
- size: {
24
- control: 'select',
25
- options: [
26
- '2xs',
27
- 'xs',
28
- 'sm',
29
- 'base',
30
- 'lg',
31
- 'xl',
32
- '2xl',
33
- '3xl',
34
- '4xl',
35
- ] satisfies BaseSize[],
36
- },
37
- text: { control: 'text' },
38
- uppercase: { control: 'boolean' },
39
- },
40
- } satisfies Meta<typeof BaseSpinner>
41
-
42
- export const Default: StoryObj<typeof BaseSpinner> = { args: { text: 'Loading...' } satisfies Partial<BaseSpinner> }
@@ -1,44 +0,0 @@
1
- import BaseTag from './BaseTag.vue'
2
-
3
- export default {
4
- component: BaseTag,
5
- title: 'Bases/BaseTag',
6
-
7
- argTypes: {
8
- active: { control: 'boolean' },
9
- avatar: { control: 'text' },
10
- circle: { control: 'text' },
11
- clickable: { control: 'boolean' },
12
- color: {
13
- control: 'select',
14
- options: [
15
- 'black',
16
- 'gray',
17
- 'green',
18
- 'indigo',
19
- 'orange',
20
- 'red',
21
- 'white',
22
- ] satisfies BaseColor[],
23
- },
24
- draggable: { control: 'boolean' },
25
- editable: { control: 'boolean' },
26
- icon: { control: 'text' },
27
- iconSize: { control: 'number' },
28
- id: { control: 'number' },
29
- isCreation: { control: 'boolean' },
30
- light: { control: 'boolean' },
31
- order: { control: 'number' },
32
- removable: { control: 'boolean' },
33
- rounded: { control: 'boolean' },
34
- size: {
35
- control: 'select',
36
- options: ['sm', 'base'] satisfies BaseTagSize[],
37
- },
38
- text: { control: 'text' },
39
- truncate: { control: 'boolean' },
40
- uppercase: { control: 'boolean' },
41
- },
42
- } satisfies Meta<typeof BaseTag>
43
-
44
- export const Default: StoryObj<typeof BaseTag> = { args: { text: 'Tag' } satisfies Partial<BaseTag> }
@@ -1,42 +0,0 @@
1
- import BaseTags from './BaseTags.vue'
2
-
3
- export default {
4
- component: BaseTags,
5
- title: 'Bases/BaseTags',
6
-
7
- argTypes: {
8
- active: { control: 'boolean' },
9
- clickable: { control: 'boolean' },
10
- draggable: { control: 'boolean' },
11
- editable: { control: 'boolean' },
12
- hasBack: { control: 'boolean' },
13
- hasCreation: { control: 'boolean' },
14
- maxTags: { control: 'number' },
15
- modelValue: { control: 'object' },
16
- removable: { control: 'boolean' },
17
- selectable: { control: 'boolean' },
18
- selectableUnique: { control: 'boolean' },
19
- size: {
20
- control: 'select',
21
- options: ['sm', 'base'] satisfies BaseTagSize[],
22
- },
23
- tags: { control: 'object' },
24
- wrap: { control: 'boolean' },
25
- },
26
- } satisfies Meta<typeof BaseTags>
27
-
28
- export const Default: StoryObj<typeof BaseTags> = {
29
- args: {
30
- modelValue: [],
31
- tags: [
32
- {
33
- id: 1,
34
- text: 'Tag 1',
35
- },
36
- {
37
- id: 2,
38
- text: 'Tag 2',
39
- },
40
- ],
41
- } satisfies Partial<BaseTags>,
42
- }
@@ -1,47 +0,0 @@
1
- import BaseText from './BaseText.vue'
2
-
3
- export default {
4
- component: BaseText,
5
- title: 'Bases/BaseText',
6
-
7
- argTypes: {
8
- alignment: {
9
- control: 'select',
10
- options: [
11
- 'center',
12
- 'left',
13
- 'right',
14
- ] satisfies BaseAlignment[],
15
- },
16
- background: {
17
- control: 'select',
18
- options: ['gray', 'white'] satisfies BaseBackground[],
19
- },
20
- block: { control: 'boolean' },
21
- bold: { control: 'boolean' },
22
- hasMargin: { control: 'boolean' },
23
- maxCharacters: { control: 'number' },
24
- noWrap: { control: 'boolean' },
25
- reverse: { control: 'boolean' },
26
- size: {
27
- control: 'select',
28
- options: [
29
- '2xs',
30
- 'xs',
31
- 'sm',
32
- 'base',
33
- 'lg',
34
- 'xl',
35
- '2xl',
36
- '3xl',
37
- '4xl',
38
- ] satisfies BaseSize[],
39
- },
40
- text: { control: 'text' },
41
- truncate: { control: 'boolean' },
42
- underline: { control: 'boolean' },
43
- uppercase: { control: 'boolean' },
44
- },
45
- } satisfies Meta<typeof BaseText>
46
-
47
- export const Default: StoryObj<typeof BaseText> = { args: { text: 'Text content' } satisfies Partial<BaseText> }
@@ -1,70 +0,0 @@
1
- import BaseToast from './BaseToast.vue'
2
-
3
- export default {
4
- component: BaseToast,
5
- title: 'Bases/BaseToast',
6
-
7
- argTypes: {
8
- hasClose: { control: 'boolean' },
9
- id: { control: 'text' },
10
- status: {
11
- control: 'select',
12
- options: [
13
- 'error',
14
- 'info',
15
- 'success',
16
- 'warning',
17
- ] satisfies BaseStatus[],
18
- },
19
- text: { control: 'text' },
20
- },
21
- } satisfies Meta<typeof BaseToast>
22
-
23
- export const Default: StoryObj<typeof BaseToast> = {
24
- args: {
25
- id: 'toast-1',
26
- status: 'info',
27
- text: 'Toast message',
28
- } satisfies Partial<BaseToast>,
29
- }
30
-
31
- export const WithAction: StoryObj<typeof BaseToast> = {
32
- args: {
33
- action: {
34
- label: 'Undo',
35
- // eslint-disable-next-line no-console
36
- onClick: () => console.log('action clicked'),
37
- },
38
- id: 'toast-2',
39
- status: 'success',
40
- text: 'Toast message',
41
- } satisfies Partial<BaseToast>,
42
- }
43
-
44
- export const WithActionShortcutEnter: StoryObj<typeof BaseToast> = {
45
- args: {
46
- action: {
47
- label: 'Yes',
48
- // eslint-disable-next-line no-console
49
- onClick: () => console.log('action clicked'),
50
- shortcut: 'Enter',
51
- },
52
- id: 'toast-3',
53
- status: 'success',
54
- text: 'Confirm this action?',
55
- } satisfies Partial<BaseToast>,
56
- }
57
-
58
- export const WithActionShortcutY: StoryObj<typeof BaseToast> = {
59
- args: {
60
- action: {
61
- label: 'Yes',
62
- // eslint-disable-next-line no-console
63
- onClick: () => console.log('action clicked'),
64
- shortcut: 'y',
65
- },
66
- id: 'toast-4',
67
- status: 'info',
68
- text: 'Confirm this action?',
69
- } satisfies Partial<BaseToast>,
70
- }
@@ -1,37 +0,0 @@
1
- import FieldAvatar from './FieldAvatar.vue'
2
-
3
- export default {
4
- component: FieldAvatar,
5
- title: 'Fields/FieldAvatar',
6
-
7
- argTypes: {
8
- action: { control: 'text' },
9
- background: {
10
- control: 'select',
11
- options: ['gray', 'white'] satisfies FieldBackground[],
12
- },
13
- border: {
14
- control: 'select',
15
- options: [
16
- 'bottom',
17
- 'full',
18
- 'none',
19
- ] satisfies FieldInputBorder[],
20
- },
21
- disabled: { control: 'boolean' },
22
- fullWidth: { control: 'boolean' },
23
- label: { control: 'text' },
24
- loading: { control: 'boolean' },
25
- maxSizeMb: { control: 'number' },
26
- src: { control: 'text' },
27
- },
28
- } satisfies Meta<typeof FieldAvatar>
29
-
30
- export const Default: StoryObj<typeof FieldAvatar> = { args: { src: 'https://via.placeholder.com/100' } satisfies Partial<FieldAvatar> }
31
-
32
- export const Loading: StoryObj<typeof FieldAvatar> = {
33
- args: {
34
- loading: true,
35
- src: 'https://via.placeholder.com/100',
36
- } satisfies Partial<FieldAvatar>,
37
- }
@@ -1,36 +0,0 @@
1
- import FieldCheckbox from './FieldCheckbox.vue'
2
-
3
- export default {
4
- component: FieldCheckbox,
5
- title: 'Fields/FieldCheckbox',
6
-
7
- argTypes: {
8
- description: { control: 'text' },
9
- disabled: { control: 'boolean' },
10
- fullWidth: { control: 'boolean' },
11
- hideError: { control: 'boolean' },
12
- label: { control: 'text' },
13
- labelIcon: { control: 'text' },
14
- lineThrough: { control: 'boolean' },
15
- loading: { control: 'boolean' },
16
- required: { control: 'boolean' },
17
- size: {
18
- control: 'select',
19
- options: [
20
- 'xs',
21
- 'sm',
22
- 'base',
23
- 'lg',
24
- ] satisfies FieldSize[],
25
- },
26
- truncate: { control: 'boolean' },
27
- uppercase: { control: 'boolean' },
28
- },
29
- } satisfies Meta<typeof FieldCheckbox>
30
-
31
- export const Default: StoryObj<typeof FieldCheckbox> = {
32
- args: {
33
- label: 'Checkbox Label',
34
- modelValue: false,
35
- } satisfies Partial<FieldCheckbox>,
36
- }
@@ -1,10 +0,0 @@
1
- import FieldDays from './FieldDays.vue'
2
-
3
- export default {
4
- component: FieldDays,
5
- title: 'Fields/FieldDays',
6
-
7
- argTypes: {},
8
- } satisfies Meta<typeof FieldDays>
9
-
10
- export const Default: StoryObj<typeof FieldDays> = { args: { modelValue: [] } satisfies Partial<FieldDays> }
@@ -1,10 +0,0 @@
1
- import FieldEmojis from './FieldEmojis.vue'
2
-
3
- export default {
4
- component: FieldEmojis,
5
- title: 'Fields/FieldEmojis',
6
-
7
- argTypes: {},
8
- } satisfies Meta<typeof FieldEmojis>
9
-
10
- export const Default: StoryObj<typeof FieldEmojis> = { args: { modelValue: '' } satisfies Partial<FieldEmojis> }
@@ -1,100 +0,0 @@
1
- import FieldInput from './FieldInput.vue'
2
-
3
- export default {
4
- component: FieldInput,
5
- title: 'Fields/FieldInput',
6
-
7
- argTypes: {
8
- alignment: {
9
- control: 'select',
10
- options: [
11
- 'center',
12
- 'left',
13
- 'right',
14
- ] satisfies BaseAlignment[],
15
- },
16
- autocomplete: { control: 'boolean' },
17
- autofocus: { control: 'boolean' },
18
- background: {
19
- control: 'select',
20
- options: ['gray', 'white'] satisfies FieldBackground[],
21
- },
22
- border: {
23
- control: 'select',
24
- options: [
25
- 'bottom',
26
- 'full',
27
- 'none',
28
- ] satisfies FieldInputBorder[],
29
- },
30
- description: { control: 'text' },
31
- disabled: { control: 'boolean' },
32
- fullWidth: { control: 'boolean' },
33
- hideError: { control: 'boolean' },
34
- label: { control: 'text' },
35
- labelIcon: { control: 'text' },
36
- lineThrough: { control: 'boolean' },
37
- loading: { control: 'boolean' },
38
- lowercaseOnly: { control: 'boolean' },
39
- max: { control: 'number' },
40
- min: { control: 'number' },
41
- placeholder: { control: 'text' },
42
- required: { control: 'boolean' },
43
- size: {
44
- control: 'select',
45
- options: [
46
- 'xs',
47
- 'sm',
48
- 'base',
49
- 'lg',
50
- ] satisfies FieldSize[],
51
- },
52
- slugOnly: { control: 'boolean' },
53
- trim: { control: 'boolean' },
54
- type: {
55
- control: 'select',
56
- options: [
57
- 'currency',
58
- 'date',
59
- 'datetime-local',
60
- 'email',
61
- 'month',
62
- 'number',
63
- 'password',
64
- 'search',
65
- 'tel',
66
- 'text',
67
- 'time',
68
- 'url',
69
- 'week',
70
- ] satisfies FieldInputType[],
71
- },
72
- uppercase: { control: 'boolean' },
73
- },
74
- } satisfies Meta<typeof FieldInput>
75
-
76
- export const Default: StoryObj<typeof FieldInput> = {
77
- args: {
78
- label: 'Input Label',
79
- modelValue: '',
80
- placeholder: 'Enter text...',
81
- } satisfies Partial<FieldInput>,
82
- }
83
-
84
- export const SlugOnly: StoryObj<typeof FieldInput> = {
85
- args: {
86
- label: 'Username',
87
- modelValue: '',
88
- placeholder: 'Enter your username',
89
- slugOnly: true,
90
- } satisfies Partial<FieldInput>,
91
- }
92
-
93
- export const Trim: StoryObj<typeof FieldInput> = {
94
- args: {
95
- label: 'First name',
96
- modelValue: 'Julien ',
97
- placeholder: 'Enter your first name',
98
- trim: true,
99
- } satisfies Partial<FieldInput>,
100
- }
@@ -1,30 +0,0 @@
1
- import FieldLabel from './FieldLabel.vue'
2
-
3
- export default {
4
- component: FieldLabel,
5
- title: 'Fields/FieldLabel',
6
-
7
- argTypes: {
8
- disabled: { control: 'boolean' },
9
- forField: { control: 'text' },
10
- hasMarginBottom: { control: 'boolean' },
11
- hasMarginLeft: { control: 'boolean' },
12
- icon: { control: 'text' },
13
- label: { control: 'text' },
14
- lineThrough: { control: 'boolean' },
15
- loading: { control: 'boolean' },
16
- required: { control: 'boolean' },
17
- size: {
18
- control: 'select',
19
- options: [
20
- 'xs',
21
- 'sm',
22
- 'base',
23
- 'lg',
24
- ] satisfies FieldSize[],
25
- },
26
- truncate: { control: 'boolean' },
27
- },
28
- } satisfies Meta<typeof FieldLabel>
29
-
30
- export const Default: StoryObj<typeof FieldLabel> = { args: { label: 'Label Text' } satisfies Partial<FieldLabel> }
@@ -1,22 +0,0 @@
1
- import FieldMessage from './FieldMessage.vue'
2
-
3
- export default {
4
- component: FieldMessage,
5
- title: 'Fields/FieldMessage',
6
-
7
- argTypes: {
8
- description: { control: 'text' },
9
- hideError: { control: 'boolean' },
10
- size: {
11
- control: 'select',
12
- options: [
13
- 'xs',
14
- 'sm',
15
- 'base',
16
- 'lg',
17
- ] satisfies FieldSize[],
18
- },
19
- },
20
- } satisfies Meta<typeof FieldMessage>
21
-
22
- export const Default: StoryObj<typeof FieldMessage> = { args: { description: 'This is a message' } satisfies Partial<FieldMessage> }