feat(): update checkbox

libs/mix-ui/src/checkbox/checkbox.component.html

@@ -1,5 +1,5 @@
 <div class="flex items-center">
-  <input class="w-4 outline-none h-4 text-primary bg-gray-100 border-gray-300 rounded focus:ring-primary dark:focus:ring-primary dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+  <input class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 bg-slate-100 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-500 dark:bg-navy-900 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
          type="checkbox"
          [formControl]="control"
          [id]="id"

libs/mix-ui/src/checkbox/checkbox.component.scss

@@ -1,4 +1,94 @@
 :host {
   display: inline-block;
+}
+
+.form-checkbox {
+  --tw-thumb: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
+}
+
+.form-checkbox:before {
+  content: var(--tw-content);
+  transform-origin: bottom;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.form-checkbox {
+  border-width: 1px;
+  display: inline-block;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  position: relative;
+}
+
+.form-checkbox:before {
+  --tw-scale-x: 0;
+  --tw-scale-y: 0;
+  height: 100%;
+  inset: 0;
+  position: absolute;
   width: 100%;
 }
+
+.form-checkbox:before,
+.form-checkbox:checked:before {
+  content: var(--tw-content);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.form-checkbox:checked:before {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+}
+
+.form-checkbox:hover {
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+    0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.form-checkbox.is-basic {
+  background-origin: border-box;
+}
+
+.form-checkbox.is-basic:before {
+  background-image: var(--tw-thumb);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  content: var(--tw-content);
+}
+
+.form-checkbox,
+.form-checkbox:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.form-checkbox {
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+.form-checkbox {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.form-checkbox,
+.form-checkbox:before {
+  transition-duration: 0.1s;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}

libs/mix-ui/src/checkbox/checkbox.component.ts

@@ -1,5 +1,14 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ControlValueAccessor, ReactiveFormsModule } from '@angular/forms';
 import { BaseTextControl } from '../base';
 
@@ -17,4 +26,25 @@ export class MixCheckboxComponent
 {
   @Input() public id = 'checkbox';
   @Input() public label = '';
+  @Output() public checkedChange = new EventEmitter();
+  public destroyRef = inject(DestroyRef);
+
+  public get checked(): boolean {
+    return this._checked;
+  }
+  @Input() public set checked(v: boolean) {
+    if (v !== this._checked) {
+      this._checked = v;
+      this.control.patchValue(v, { emitEvent: false });
+    }
+  }
+
+  private _checked!: boolean;
+
+  ngOnInit() {
+    console.log(123);
+    this.control.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((v) => this.checkedChange.emit(v));
+  }
 }

libs/mix-ui/src/data-table/data-table.component.html

@@ -40,11 +40,10 @@
               <ng-container *ngFor="let col of displayColumns; let i = index">
                 <th class="px-6 py-3">
                   <div class="flex items-center">
-                    <input *ngIf="i === 0"
-                           class="form-check-input me-4"
-                           type="checkbox"
-                           [ngModel]="isAllSelected"
-                           (ngModelChange)="markAllChecked($event)">
+                    <mix-checkbox *ngIf="i === 0"
+                                  class="me-4"
+                                  [checked]="isAllSelected"
+                                  (checkedChange)="markAllChecked($event)"></mix-checkbox>
 
                     <div class="grow">
                       <ng-container *ngIf="col.tplHeader">
@@ -76,11 +75,10 @@
                 <td class="px-6 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                     [ngStyle]="{ width: col.width, 'min-width': col.minWidth }">
                   <div class="flex h-full items-center">
-                    <input *ngIf="i === 0"
-                           class="form-check-input me-4"
-                           type="checkbox"
-                           [ngModel]="!!currentSelectedItemDic[$any(item)[uniqueKey]]"
-                           (ngModelChange)="onItemSelected($event, item)">
+                    <mix-checkbox *ngIf="i === 0"
+                                  class="me-4"
+                                  [checked]="!!currentSelectedItemDic[$any(item)[uniqueKey]]"
+                                  (checkedChange)="onItemSelected($event, item)"></mix-checkbox>
 
                     <div class="grow">
                       <ng-container *ngIf="col.tplCell">

libs/mix-ui/src/data-table/data-table.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TippyDirective } from '@ngneat/helipopper';
-import { TuiTableModule } from '@taiga-ui/addon-table';
 import {
   TuiDataListModule,
   TuiLoaderModule,
@@ -16,6 +15,7 @@ import {
   TuiPaginationModule,
 } from '@taiga-ui/kit';
 import { MixButtonComponent } from '../button';
+import { MixCheckboxComponent } from '../checkbox';
 import { DataTableComponent } from './data-table.component';
 import { TableCellDirective } from './directives/cell.directive';
 import { TableColumnDirective } from './directives/column.directive';
@@ -29,7 +29,6 @@ import { TableHeaderDirective } from './directives/header.directive';
     TableColumnDirective,
   ],
   imports: [
-    TuiTableModule,
     CommonModule,
     TuiLoaderModule,
     TuiInputModule,
@@ -43,6 +42,7 @@ import { TableHeaderDirective } from './directives/header.directive';
     TuiDataListWrapperModule,
     TuiMultiSelectModule,
     TippyDirective,
+    MixCheckboxComponent,
   ],
   exports: [
     DataTableComponent,