Skip to content

Commit

Permalink
Add checkbox component to form package with demo (#443)
Browse files Browse the repository at this point in the history
* feat: add checkbox  component to form package

* feat: add checkbox  input component to form package

* feat: update checkbox input to support multiple checkbox

* chore: sort props alphabetically
  • Loading branch information
KabinKhandThakuri authored Jan 7, 2025
1 parent 21b41e0 commit 3046d77
Show file tree
Hide file tree
Showing 9 changed files with 595 additions and 1 deletion.
16 changes: 16 additions & 0 deletions apps/demo/src/locales/en/form.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
"submit": "Submit"
},
"errors": {
"checkbox": {
"min": "Please select at least {min} options"
},
"daysInput": {
"invalid": "Please provide number of days within a year"
},
Expand Down Expand Up @@ -40,25 +43,31 @@
}
},
"label": {
"accept": "Accept the terms and conditions to proceed",
"appointmentDate": "Appointment date",
"appointmentTime": "Appointment time",
"arrivalDate": "Arrival date",
"assumptions": "Assumptions",
"availableDatetime": "Available datetime",
"basicInput": "Basic",
"bike": "Bike",
"car": "Car",
"checkbox": "Checkbox input",
"consequences": "Consequences",
"contentElement": "Content element",
"customColsRowsInput": "With cols and rows props",
"customErrorMessageInput": "With custom error message",
"customFormat": "Custom format",
"customValidationInput": "With custom validation",
"customStyleInput": "Custom style",
"dailySynchro": "Select the sections that should be in the daily synchro",
"dateOfBirth": "Date of birth",
"datePicker": "Date picker",
"dateRange": "Date range",
"dateTimePicker": "Datetime picker",
"daysInput": "Days input",
"debouncedTypeahead": "With debounce time prop",
"deliverableList": "A list of your daily deliverables",
"disabled": "Disabled",
"disableWeekDays": "Disable week days",
"disabledMultiSelect": "Disabled multiselect",
Expand All @@ -67,6 +76,7 @@
"expiresAfter": "Expires after",
"female": "Female",
"gender": "Gender",
"generalQuestions": "General questions",
"iconSlot": "Icon slot",
"input": "Input",
"inputWithType": "With type prop",
Expand All @@ -80,17 +90,22 @@
"monthAndYearPicker": "Month and year picker",
"monthPicker": "Month picker",
"multiCalendars": "Multicalendar",
"multiCheckbox": "Multiple checkbox input",
"multiSelect": "Multiselect",
"next": "Next",
"number": "Number",
"one": "One",
"other": "Other",
"password": "Password",
"pickupDate": "Pickup date",
"presentationDate": "Presentation date",
"radio": "Radio input",
"reportDate": "Report date",
"size": "Size",
"select": "Select",
"solutions": "Solutions",
"submit": "Submit",
"summary": "Summary",
"switch": "Switch",
"textarea": "Textarea",
"textInput": "Text input",
Expand All @@ -104,6 +119,7 @@
"valid": "Show valid state",
"vehicle": "Vehicle",
"withI18n": "With i18n",
"workInProgress": "Work in progress",
"year": "Year",
"yearPicker": "Year picker"
},
Expand Down
13 changes: 13 additions & 0 deletions apps/demo/src/locales/fr/form.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,31 @@
}
},
"label": {
"accept": "Accept the terms and conditions to proceed",
"appointmentDate": "Appointment date[fr]",
"appointmentTime": "Appointment time[fr]",
"arrivalDate": "Arrival date[fr]",
"assumptions": "Assumptions",
"availableDatetime": "Available datetime[fr]",
"basicInput": "Basic[fr]",
"bike": "Bike",
"car": "Car",
"checkbox": "Checkbox input",
"consequences": "Consequences",
"contentElement": "Content element",
"customColsRowsInput": "With cols and rows props[fr]",
"customErrorMessageInput": "With custom error message[fr]",
"customFormat": "Custom format[fr]",
"customValidationInput": "With custom validation[fr]",
"customStyleInput": "Custom style[fr]",
"dailySynchro": "Select the sections that should be in the daily synchro",
"dateOfBirth": "Date of birth[fr]",
"datePicker": "Date picker[fr]",
"dateRange": "Date range[fr]",
"dateTimePicker": "Datetime picker[fr]",
"daysInput": "Days input",
"debouncedTypeahead": "With debounce time prop",
"deliverableList": "A list of your daily deliverables",
"disabledMultiSelect": "Disabled multiselect[fr]",
"disabled": "Disabled[fr]",
"disableWeekDays": "Disable week days[fr]",
Expand All @@ -67,6 +73,7 @@
"expiresAfter": "Expires after",
"female": "Female",
"gender": "Gender",
"generalQuestions": "General questions",
"iconSlot": "Icon slot",
"input": "Input[fr]",
"inputWithType": "With type prop[fr]",
Expand All @@ -80,17 +87,22 @@
"monthAndYearPicker": "Month and year picker[fr]",
"monthPicker": "Month picker[fr]",
"multiCalendars": "Multicalendar[fr]",
"multiCheckbox": "Multiple checkbox input",
"multiSelect": "Multiselect[fr]",
"next": "Next",
"number": "Number[fr]",
"one": "One",
"other": "Other",
"password": "Password[fr]",
"pickupDate": "Pickup date[fr]",
"presentationDate": "Presentation date[fr]",
"radio": "Radio input",
"reportDate": "Report date[fr]",
"size": "Size",
"select": "Select[fr]",
"solutions": "Solutions",
"submit": "Submit",
"summary": "Summary",
"switch": "Switch[fr]",
"textarea": "Textarea[fr]",
"textInput": "Text input[fr]",
Expand All @@ -104,6 +116,7 @@
"valid": "Show valid state[fr]",
"vehicle": "Vehicle",
"withI18n": "With i18n[fr]",
"workInProgress": "Work in progress",
"year": "Year[fr]",
"yearPicker": "Year picke[fr]"
},
Expand Down
6 changes: 6 additions & 0 deletions apps/demo/src/router/form.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
const CheckboxInput = () => import("@/views/Form/checkboxInput/Index.vue");
const DatePicker = () => import("@/views/Form/datePicker/Index.vue");
const DaysInput = () => import("@/views/Form/daysInput/Index.vue");
const EditableContent = () => import("@/views/Form/editableContent/Index.vue");
Expand All @@ -17,6 +18,11 @@ const routes = [
{
path: "/form",
children: [
{
component: CheckboxInput,
name: "checkboxInput",
path: "checkbox-input",
},
{
component: DatePicker,
name: "datePicker",
Expand Down
4 changes: 4 additions & 0 deletions apps/demo/src/views/Form/FormPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ const menu = [
name: "Get started",
routeName: "",
},
{
name: "Checkbox input",
routeName: "checkboxInput",
},
{
name: "Date picker",
routeName: "datePicker",
Expand Down
Loading

0 comments on commit 3046d77

Please sign in to comment.