💄 Adding the style of the primevue checkbox component

2025-07-22 16:49:51 +02:00 · 2025-07-22 16:49:51 +02:00 · 2962480a85
commit 2962480a85
parent f43dfa4095
2 changed files with 116 additions and 0 deletions
--- a/src/assets/style/primevue-style/checkbox.css
+++ 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);
+}
--- a/src/components/checkbox/IVCheckbox.type.ts
+++ 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<unknown> | 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';
+}