diff --git a/src/assets/style/primevue-style/checkbox.css b/src/assets/style/primevue-style/checkbox.css new file mode 100644 index 0000000..635532a --- /dev/null +++ b/src/assets/style/primevue-style/checkbox.css @@ -0,0 +1,32 @@ +:root{ + /* size */ + --p-checkbox-width: 1.5rem; + --p-checkbox-height: 1.5rem; + --p-checkbox-sm-width: 1rem; + --p-checkbox-sm-height: 1rem; + /* border */ + --p-checkbox-border-radius: 0px; + --p-checkbox-border-color: var(--border-action-high-blue-france); + --p-checkbox-hover-border-color: var(--border-action-high-blue-france); + /* background */ + --p-checkbox-background: var(--background-default-grey); + /* icon */ + --p-checkbox-icon-size: 1rem; + --p-checkbox-icon-sm-size: 1rem; + --p-checkbox-icon-color: var(--background-default-grey); + /* focus */ + --p-checkbox-checked-focus-border-color: var(--border-action-high-blue-france); + --p-checkbox-focus-border-color: var(--border-action-high-blue-france); + --p-checkbox-focus-ring-color: var(--focus-color); + --p-checkbox-focus-ring-width: var(--focus-width); + --p-checkbox-focus-ring-style: var(--focus-style); + --p-checkbox-focus-ring-offset: var(--focus-offset); + /* checked */ + --p-checkbox-checked-border-color: var(--border-action-high-blue-france); + --p-checkbox-checked-background: var(--border-active-blue-france); + --p-checkbox-icon-checked-color: var(--background-default-grey); + /* checked:hover */ + --p-checkbox-icon-checked-hover-color: var(--background-default-grey); + --p-checkbox-checked-hover-border-color: var(--border-action-high-blue-france); + --p-checkbox-checked-hover-background: var(--border-active-blue-france); +} diff --git a/src/components/checkbox/IVCheckbox.type.ts b/src/components/checkbox/IVCheckbox.type.ts new file mode 100644 index 0000000..31916fe --- /dev/null +++ b/src/components/checkbox/IVCheckbox.type.ts @@ -0,0 +1,84 @@ +/** + * Interface representing the props for a CheckBox Vue component. + */ +export default interface ICheckBox { + /** + * The unique identifier for the checkbox element. + */ + id?: string; + + /** + * The name attribute for the checkbox input. + */ + name?: string; + + /** + * Indicates whether the checkbox is required in a form. + */ + required?: boolean; + + /** + * The value associated with the checkbox. + */ + value?: unknown; + + /** + * Whether the checkbox is initially checked. + */ + checked?: boolean; + + /** + * The bound value of the checkbox, can be a boolean or an array of values. + */ + modelValue: Array | boolean; + + /** + * If true, renders the checkbox in a smaller size. + */ + small?: boolean; + + /** + * If true, displays the checkbox inline with other elements. + */ + inline?: boolean; + + /** + * If true, the checkbox is read-only and cannot be changed by the user. + */ + readonly?: boolean; + + /** + * Opacity level applied when the checkbox is read-only. + */ + readonlyOpacity?: number; + + /** + * The label text displayed next to the checkbox. + */ + label?: string; + + /** + * The error message shown when validation fails. + */ + errorMessage?: string; + + /** + * The message shown when the checkbox input is valid. + */ + validMessage?: string; + + /** + * Additional hint or helper text displayed below the checkbox. + */ + hint?: string; + + /** + * If true, disables the checkbox input. + */ + disabled?: boolean; + + /** + * Visual style of the checkbox, can be 'normal', 'error', or 'success'. + */ + type?: 'normal' | 'error' | 'success'; +}