@@ -44,26 +44,103 @@ const inputTypes = [
4444 'week' ,
4545]
4646
47- const template = html `< div class ="component-appearance-grid forms-appearance-grid " :class ="{ 'forms-appearance-grid--composer': component === 'Composer' } ">
47+ const template = html `< div
48+ class ="component-appearance-grid forms-appearance-grid "
49+ :class ="{ 'forms-appearance-grid--composer': component === 'Composer' } "
50+ >
4851 < div class ="component-appearance-cell " r-for ="sample in samples ">
4952 < code > {{ sample.label }}</ code >
50- < AppForm r-if ="component === 'AppForm' " class ="p-3 " :tone ="sample.tone " :variant ="sample.variant " @submit.prevent ="sample.submit($event) ">
51- < FormInputField :id ="sample.id " label ="Project name " name ="project " :model ="sample.model " :required ="true "/>
53+ < AppForm
54+ r-if ="component === 'AppForm' "
55+ class ="p-3 "
56+ :tone ="sample.tone "
57+ :variant ="sample.variant "
58+ @submit.prevent ="sample.submit($event) "
59+ >
60+ < FormInputField
61+ :id ="sample.id "
62+ label ="Project name "
63+ name ="project "
64+ :model ="sample.model "
65+ :required ="true "/>
5266 < FormSubmit label ="Preview save " :tone ="sample.tone "/>
53- < FormStatus :hidden ="!sample.receipt "> {{ sample.receipt }}</ FormStatus >
67+ < FormStatus :hidden ="!sample.receipt "
68+ > {{ sample.receipt }}</ FormStatus >
5469 </ AppForm >
55- < FormInputField r-if ="component === 'FormInputField' " :id ="sample.id " :label ="axis === 'type' ? sample.label : 'Project name' " :type ="axis === 'type' ? sample.label : 'text' " :model ="sample.model " :tone ="sample.tone " :variant ="sample.variant " placeholder ="Your next idea "/>
56- < FormSelectField r-if ="component === 'FormSelectField' " :id ="sample.id " label ="Region " :model ="sample.model " :options ="options " :tone ="sample.tone " :variant ="sample.variant "/>
57- < FormCheck r-if ="component === 'FormCheck' " :id ="sample.id " label ="Release updates " :checked ="sample.checked " :tone ="sample.tone "/>
58- < form r-if ="component === 'FormSubmit' " @submit.prevent ="sample.submit($event) ">
59- < FormSubmit :label ="sample.label " :tone ="sample.tone " :variant ="sample.variant "/>
60- < FormStatus :hidden ="!sample.receipt "> {{ sample.receipt }}</ FormStatus >
70+ < FormInputField
71+ r-if ="component === 'FormInputField' "
72+ :id ="sample.id "
73+ :label ="axis === 'type' ? sample.label : 'Project name' "
74+ :type ="axis === 'type' ? sample.label : 'text' "
75+ :model ="sample.model "
76+ :tone ="sample.tone "
77+ :variant ="sample.variant "
78+ placeholder ="Your next idea "/>
79+ < FormSelectField
80+ r-if ="component === 'FormSelectField' "
81+ :id ="sample.id "
82+ label ="Region "
83+ :model ="sample.model "
84+ :options ="options "
85+ :tone ="sample.tone "
86+ :variant ="sample.variant "/>
87+ < FormCheck
88+ r-if ="component === 'FormCheck' "
89+ :id ="sample.id "
90+ label ="Release updates "
91+ :checked ="sample.checked "
92+ :tone ="sample.tone "/>
93+ < form
94+ r-if ="component === 'FormSubmit' "
95+ @submit.prevent ="sample.submit($event) "
96+ >
97+ < FormSubmit
98+ :label ="sample.label "
99+ :tone ="sample.tone "
100+ :variant ="sample.variant "/>
101+ < FormStatus :hidden ="!sample.receipt "
102+ > {{ sample.receipt }}</ FormStatus >
61103 </ form >
62- < FormStatus r-if ="component === 'FormStatus' " :tone ="sample.tone " :variant ="sample.variant "> Your draft is ready for review.</ FormStatus >
63- < AutoCompleteInput r-if ="component === 'AutoCompleteInput' " :id ="sample.id " label ="Region " :model ="sample.query " :selectedValue ="sample.selected " :options ="options " :tone ="sample.tone " :variant ="sample.variant " placeholder ="Search a region "/>
64- < MultiAutoCompleteInput r-if ="component === 'MultiAutoCompleteInput' " :id ="sample.id " label ="Release tags " :items ="sample.items " :model ="sample.query " :options ="tags " :tone ="sample.tone " :variant ="sample.variant " placeholder ="Add a tag " :allowCustomValues ="true "/>
65- < Composer r-if ="component === 'Composer' " :html ="sample.content " :label ="sample.label + ' editor' " :tone ="sample.tone " :variant ="sample.variant " minHeight ="8rem "/>
66- < DropFiles r-if ="component === 'DropFiles' " :files ="sample.files " label ="Attachments " hint ="Choose files, drop, or paste. " :tone ="sample.tone " :variant ="sample.variant "/>
104+ < FormStatus
105+ r-if ="component === 'FormStatus' "
106+ :tone ="sample.tone "
107+ :variant ="sample.variant "
108+ > Your draft is ready for review.</ FormStatus >
109+ < AutoCompleteInput
110+ r-if ="component === 'AutoCompleteInput' "
111+ :id ="sample.id "
112+ label ="Region "
113+ :model ="sample.query "
114+ :selectedValue ="sample.selected "
115+ :options ="options "
116+ :tone ="sample.tone "
117+ :variant ="sample.variant "
118+ placeholder ="Search a region "/>
119+ < MultiAutoCompleteInput
120+ r-if ="component === 'MultiAutoCompleteInput' "
121+ :id ="sample.id "
122+ label ="Release tags "
123+ :items ="sample.items "
124+ :model ="sample.query "
125+ :options ="tags "
126+ :tone ="sample.tone "
127+ :variant ="sample.variant "
128+ placeholder ="Add a tag "
129+ :allowCustomValues ="true "/>
130+ < Composer
131+ r-if ="component === 'Composer' "
132+ :html ="sample.content "
133+ :label ="sample.label + ' editor' "
134+ :tone ="sample.tone "
135+ :variant ="sample.variant "
136+ minHeight ="8rem "/>
137+ < DropFiles
138+ r-if ="component === 'DropFiles' "
139+ :files ="sample.files "
140+ label ="Attachments "
141+ hint ="Choose files, drop, or paste. "
142+ :tone ="sample.tone "
143+ :variant ="sample.variant "/>
67144 </ div >
68145</ div > `
69146
0 commit comments