1
1
import type { Meta , StoryObj } from "@storybook/vue3" ;
2
- import type { tFormInput } from "@open-xamu-co/ui-common-types" ;
2
+ import type { iInvalidInput , tFormInput } from "@open-xamu-co/ui-common-types" ;
3
3
4
4
import { FormInput } from "@open-xamu-co/ui-common-helpers" ;
5
5
import { eFormType } from "@open-xamu-co/ui-common-enums" ;
6
6
7
- import FormSimpleComponent from "./Simple.vue" ;
8
-
9
- const inputs : tFormInput [ ] = [
10
- new FormInput ( {
11
- values : [ "" ] ,
12
- name : "firstName" ,
13
- required : true ,
14
- title : "First Name" ,
15
- placeholder : "What is your first name?" ,
16
- autocomplete : "name" ,
17
- icon : "user" ,
18
- } ) ,
19
- new FormInput ( {
20
- placeholder : "E.g. Blue" ,
21
- title : "Possible Value" ,
22
- icon : [ "industry" , { } ] ,
23
- name : "offerFieldValues" ,
24
- multiple : true ,
25
- } ) ,
26
- new FormInput ( {
27
- required : true ,
28
- options : [ { value : 1 , alias : "Payment on Delivery" } ] ,
29
- type : eFormType . SELECT_FILTER ,
30
- placeholder : "Search payment methods" ,
31
- icon : "credit-card" ,
32
- autocomplete : "off" ,
33
- name : "paymentMethodIds" ,
34
- multiple : true ,
35
- min : 0 ,
36
- title : "Choose one or several payment methods" ,
37
- } ) ,
38
- new FormInput ( {
39
- options : [
40
- { value : "Happy" , icon : "face-smile" } ,
41
- { value : "Tired" , icon : "face-tired" } ,
42
- { value : "Sad" , icon : "face-sad-tear" } ,
43
- { value : "indiferent" , icon : "face-meh" } ,
44
- { value : "In love" , icon : "face-grin-hearts" } ,
45
- ] ,
46
- type : eFormType . CHOICE ,
47
- values : [ "" ] ,
48
- name : "feeling" ,
49
- title : "How you feeling today?" ,
50
- } ) ,
51
- new FormInput ( {
52
- type : eFormType . BOOLEAN ,
53
- placeholder : "Users can skip this field when creating an offer" ,
54
- name : "nullable" ,
55
- title : "Is this field optional in the offer?" ,
56
- } ) ,
57
- new FormInput ( {
58
- name : "logo" ,
59
- type : eFormType . FILE ,
60
- title : "Business logo" ,
61
- max : 3 ,
62
- } ) ,
63
- ] ;
7
+ import FormSimple from "./Simple.vue" ;
8
+ import { ref } from "vue" ;
64
9
65
10
const meta : Meta = {
66
11
title : "Form/Form Simple" ,
67
- component : FormSimpleComponent as any ,
68
- args : { modelValue : inputs } ,
12
+ component : FormSimple as any ,
13
+ args : { } ,
69
14
} ;
70
15
71
16
type Story = StoryObj < typeof meta > ;
72
17
73
- export const Form : Story = {
74
- args : { modelValue : inputs } ,
18
+ export const Sample : Story = {
19
+ args : { } ,
75
20
} ;
76
21
77
- export const FormUsingLocationField : Story = {
22
+ export const WithInputs : Story = {
23
+ render : ( args ) => ( {
24
+ components : { FormSimple } ,
25
+ setup ( ) {
26
+ const inputs : tFormInput [ ] = [
27
+ new FormInput ( {
28
+ values : [ "" ] ,
29
+ name : "firstName" ,
30
+ required : true ,
31
+ title : "First Name" ,
32
+ placeholder : "What is your first name?" ,
33
+ autocomplete : "name" ,
34
+ icon : "user" ,
35
+ } ) ,
36
+ new FormInput ( {
37
+ placeholder : "E.g. Blue" ,
38
+ title : "Possible Value" ,
39
+ icon : [ "industry" , { } ] ,
40
+ name : "offerFieldValues" ,
41
+ multiple : true ,
42
+ } ) ,
43
+ new FormInput ( {
44
+ required : true ,
45
+ options : [ { value : 1 , alias : "Payment on Delivery" } ] ,
46
+ type : eFormType . SELECT_FILTER ,
47
+ placeholder : "Search payment methods" ,
48
+ icon : "credit-card" ,
49
+ autocomplete : "off" ,
50
+ name : "paymentMethodIds" ,
51
+ multiple : true ,
52
+ min : 0 ,
53
+ title : "Choose one or several payment methods" ,
54
+ } ) ,
55
+ new FormInput ( {
56
+ options : [
57
+ { value : "Happy" , icon : "face-smile" } ,
58
+ { value : "Tired" , icon : "face-tired" } ,
59
+ { value : "Sad" , icon : "face-sad-tear" } ,
60
+ { value : "indiferent" , icon : "face-meh" } ,
61
+ { value : "In love" , icon : "face-grin-hearts" } ,
62
+ ] ,
63
+ type : eFormType . CHOICE ,
64
+ values : [ "" ] ,
65
+ name : "feeling" ,
66
+ title : "How you feeling today?" ,
67
+ } ) ,
68
+ new FormInput ( {
69
+ type : eFormType . BOOLEAN ,
70
+ placeholder : "Users can skip this field when creating an offer" ,
71
+ name : "nullable" ,
72
+ title : "Is this field optional in the offer?" ,
73
+ } ) ,
74
+ new FormInput ( {
75
+ name : "logo" ,
76
+ type : eFormType . FILE ,
77
+ title : "Business logo" ,
78
+ max : 3 ,
79
+ } ) ,
80
+ ] ;
81
+ const invalid = ref < iInvalidInput [ ] > ( [ ] ) ;
82
+
83
+ return { args, inputs, invalid } ;
84
+ } ,
85
+ template : `<FormSimple v-bind="args" v-model="inputs" v-model:invalid="invalid" />` ,
86
+ } ) ,
87
+ args : { } ,
88
+ } ;
89
+
90
+ export const WithLocationField : Story = {
78
91
args : {
79
92
modelValue : [
80
93
new FormInput ( {
81
- values : [ [ "" , "" , "" ] ] ,
94
+ values : [ [ "CO " , "VAC " , "Cali " ] ] ,
82
95
name : "location" ,
83
96
type : eFormType . LOCATION ,
84
97
required : true ,
@@ -87,7 +100,7 @@ export const FormUsingLocationField: Story = {
87
100
} ,
88
101
} ;
89
102
90
- export const FormUsingPhoneField : Story = {
103
+ export const WithPhoneField : Story = {
91
104
args : {
92
105
modelValue : [
93
106
new FormInput ( {
@@ -100,4 +113,87 @@ export const FormUsingPhoneField: Story = {
100
113
} ,
101
114
} ;
102
115
116
+ export const Make : Story = {
117
+ render : ( args ) => ( {
118
+ components : { FormSimple } ,
119
+ setup ( ) {
120
+ const inputs = ref < tFormInput [ ] > ( [ ] ) ;
121
+ const invalid = ref < iInvalidInput [ ] > ( [ ] ) ;
122
+ const sampleInstance = {
123
+ locationState : "VAC" ,
124
+ locationCity : "Cali" ,
125
+ whatsappIndicative : "CO+57" ,
126
+ updatedAt : "2024-10-08T15:27:58.220" ,
127
+ address : "" ,
128
+ slogan : "We are yours" ,
129
+ banner : { message : "10% off" , url : "https://www.youtube.com/watch?v=dQw4w9WgXcQ" } ,
130
+ locationCountry : "CO" ,
131
+ createdAt : "2024-09-19T18:47:20.000" ,
132
+ whatsappNumber : "0000000000" ,
133
+ name : "Superstore" ,
134
+ id : "localhost" ,
135
+ } ;
136
+
137
+ function makeInstanceInputs ( instance : typeof sampleInstance ) : tFormInput [ ] {
138
+ return [
139
+ new FormInput ( {
140
+ values : [ instance ?. name || "" ] ,
141
+ name : "name" ,
142
+ required : true ,
143
+ title : "Nombre de la tienda" ,
144
+ placeholder : "Ej: Mi tienda" ,
145
+ icon : "store" ,
146
+ } ) ,
147
+ new FormInput ( {
148
+ values : [ instance ?. slogan || "" ] ,
149
+ name : "slogan" ,
150
+ title : "Eslogan de la tienda" ,
151
+ placeholder : "Ej: La tienda cerca de ti" ,
152
+ icon : "flag" ,
153
+ } ) ,
154
+ new FormInput ( {
155
+ values : [
156
+ [ instance ?. whatsappIndicative || "" , instance ?. whatsappNumber || "" ] ,
157
+ ] ,
158
+ name : "whatsapp" ,
159
+ title : "Whatsapp" ,
160
+ placeholder : "Whatsapp de la tienda" ,
161
+ icon : [ "whatsapp" , { brand : true } ] ,
162
+ type : eFormType . CELLPHONE ,
163
+ } ) ,
164
+ new FormInput ( {
165
+ values : [
166
+ [ "co" , instance ?. locationState || "" , instance ?. locationCity || "" ] ,
167
+ ] ,
168
+ name : "location" ,
169
+ title : "Ubicacion" ,
170
+ placeholder : "Ubicacion de la tienda" ,
171
+ icon : "city" ,
172
+ type : eFormType . LOCATION ,
173
+ } ) ,
174
+ new FormInput ( {
175
+ values : [ instance ?. address || "" ] ,
176
+ name : "address" ,
177
+ title : "Direccion" ,
178
+ placeholder : "Ej: Cra 123 #45-67 Sur" ,
179
+ icon : "location-dot" ,
180
+ } ) ,
181
+ ] ;
182
+ }
183
+
184
+ return { args, inputs, invalid, sampleInstance, makeInstanceInputs } ;
185
+ } ,
186
+ template : `
187
+ <FormSimple
188
+ v-bind="args"
189
+ v-model="inputs"
190
+ v-model:invalid="invalid"
191
+ :make="makeInstanceInputs"
192
+ :payload="[sampleInstance]"
193
+ />
194
+ ` ,
195
+ } ) ,
196
+ args : { } ,
197
+ } ;
198
+
103
199
export default meta ;
0 commit comments