From bcad80572776bdb3f15424554a371d7bdc55fabe Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 6 Feb 2023 15:24:36 +0300 Subject: [PATCH] Fixed exemple page and collback --- README.md | 2 +- example/index.html | 46 +++++++++++++------------ example/index.js | 18 +++++----- package-lock.json | 4 +-- package.json | 2 +- src/cg-select.ts | 49 ++++++++++++++++----------- src/components/utils/utils.ts | 4 ++- src/interfaces/cg-select.interface.ts | 2 +- 8 files changed, 70 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index 8552656..9037b1a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.2.31 +## version ~ 0.2.32 This component allows you to create a custom select. It offers more flexible customization and use of select. Customization, multi-selection and live search by elements are available. diff --git a/example/index.html b/example/index.html index 13c4657..31dfec4 100644 --- a/example/index.html +++ b/example/index.html @@ -35,7 +35,7 @@
-

Дефолтный селект

+

Default select

@@ -43,12 +43,12 @@ - + 
               const dropdown = new CGSelect({
                 selector: '.cg-dropdown_one', 
-                placeholder: 'Выберите авто', 
+                placeholder: 'Choose a car', 
                 lable: 'EXAMPLE', 
                 items: [
                   'BMW',
@@ -76,22 +76,22 @@
-

Дефолтный селект с функцией nativeSelectMode

+

Default select with function nativeSelectMode

- *При мобильном разрешении появляеться нативный селект. + *Native select appears on mobile resolution.

- + 
               const dropdown = new CGSelect({
                 selector: '.cg-dropdown_one', 
-                placeholder: 'Выберите авто', 
+                placeholder: 'Choose a car', 
                 nativeSelectMode: true,
                 items: [
                   'BMW',
@@ -119,23 +119,23 @@
-

Дефолтный селект с функцией listDisplayMode

+

Default select with function listDisplayMode

- *При использовании данного метода лист с выбором появляеться как модальное окно. + *When using this method, the selection sheet appears as a modal window.

- + 
               const dropdown = new CGSelect({
                 selector: '.cg-dropdown_listDisplayMode', 
-                placeholder: 'Выберите авто', 
+                placeholder: 'Choose a car', 
                 listDisplayMode: true,
                 items: [
                   'BMW',
@@ -163,11 +163,11 @@
-

Селект с данными с URL

+

Select with data from URL

- + 
@@ -192,12 +192,12 @@
-

Категории

+

Categories

- + 
@@ -253,7 +253,7 @@
-

Управление с помошью кнопок

+

Button control

@@ -263,13 +263,13 @@
- + 
             const dropdown = new CGSelect({
               selector: '.cg-dropdown_usedBtn', 
-              placeholder: 'Выберите авто', 
+              placeholder: 'Choose a car', 
               searchMode: true,
               items: [
                   'BMW',
@@ -311,21 +311,23 @@
-

Функция disabled

+

Function disabled

- +
- + 
             const dropdown = new CGSelect({
               selector: '.cg-dropdown_checkboxDisable', 
-              placeholder: 'Выберите авто', 
+              placeholder: 'Choose a car', 
               searchMode: true,
               items: [
                 'BMW',
diff --git a/example/index.js b/example/index.js
index bab818b..1802f47 100644
--- a/example/index.js
+++ b/example/index.js
@@ -4,8 +4,8 @@ import './example';
 // ------------------------------Обычный селект--------------------
 const dropdown = new CGSelect({
   selector: '.cg-dropdown_one',
-  placeholder: 'Выберите авто',
-  lable: 'EXAMPLE',
+  placeholder: 'Choose a car',
+  label: 'EXAMPLE',
   items: [
     'BMW',
     {
@@ -28,14 +28,14 @@ const dropdown = new CGSelect({
   // multiselect: true,
 });
 
-// dropdown.on('select', function (e) {
-//   console.log(`this state: ${e}`);
-// });
+dropdown.on('clear', function (e) {
+  console.log(`this state: ${e}`);
+});
 
 // ------------------------------NativeSelect-----------------------
 const dropdownNativeSelect = new CGSelect({
   selector: '.cg-dropdown_selectNative',
-  placeholder: 'Выберите авто',
+  placeholder: 'Choose a car',
   nativeSelectMode: true,
   items: [
     'BMW',
@@ -63,7 +63,7 @@ const dropdownNativeSelect = new CGSelect({
 // ------------------------------listDisplayMode--------------------
 const dropdownlistDisplayMode = new CGSelect({
   selector: '.cg-dropdown_listDisplayMode',
-  placeholder: 'Выберите авто',
+  placeholder: 'Choose a car',
   listDisplayMode: true,
   items: [
     'BMW',
@@ -134,7 +134,7 @@ const dropdown4 = new CGSelect({
 //----------------управление с помощью кнопок----------------------------------
 const dropdownBtn = new CGSelect({
   selector: '.cg-dropdown_usedBtn',
-  placeholder: 'Выберите авто',
+  placeholder: 'Choose a car',
   searchMode: true,
   items: [
     'BMW',
@@ -181,7 +181,7 @@ dropdownBtn.buttonControl(buttonClose, 'close');
 //-------------------------Функция Disabled----------------------------------
 const dropdownDisabled = new CGSelect({
   selector: '.cg-dropdown_checkboxDisable',
-  placeholder: 'Выберите авто',
+  placeholder: 'Choose a car',
   searchMode: true,
   items: [
     'BMW',
diff --git a/package-lock.json b/package-lock.json
index 4e802d2..1665717 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cg-select",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cg-select",
-      "version": "0.2.31",
+      "version": "0.2.32",
       "license": "ISC",
       "dependencies": {
         "@parcel/optimizer-css": "^2.8.0",
diff --git a/package.json b/package.json
index db6d8d1..648f3b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",
diff --git a/src/cg-select.ts b/src/cg-select.ts
index c0c567e..d5994a1 100644
--- a/src/cg-select.ts
+++ b/src/cg-select.ts
@@ -43,7 +43,7 @@ export class CGSelect implements ICgSelect {
   nativeSelectMode?: boolean;
   listDisplayMode?: boolean;
   language?: string;
-  lable?: string;
+  label?: string;
   styles?: IStyle;
   event?: string;
   url?: string;
@@ -74,7 +74,7 @@ export class CGSelect implements ICgSelect {
    * Variable for carriage control.
    * @type {Element | null | undefined}
    */
-  private caret: Element | null | undefined;
+  private carriage: Element | null | undefined;
   /**
    * Transferred categories.
    * @type {string}
@@ -94,7 +94,7 @@ export class CGSelect implements ICgSelect {
    * Button, to control the select.
    * @type {Element | null}
    */
-  private btnCntr?: Element | null;
+  private buttonAction?: Element | null;
 
   /**
    * @param {ICgSelect} setting Object accepting select settings.
@@ -105,7 +105,7 @@ export class CGSelect implements ICgSelect {
    *  selector: 'Unique selector',
       selected: 'Selected item',
       placeholder: '...',
-      lable: '...'
+      label: '...'
       items: [string|number|object],
       theme: string,
       searchMode: true/false,
@@ -119,9 +119,9 @@ export class CGSelect implements ICgSelect {
         },
         list: {...},
         chips: {...},
-        caret: {...},
+        carriage: {...},
         placeholder: {...},
-        lable: {..},
+        label: {..},
       },
       event: '...',
       url: 'http/...',
@@ -191,7 +191,7 @@ export class CGSelect implements ICgSelect {
       searchMode,
       language,
       styles,
-      lable,
+      label,
       event,
       selected,
       placeholder,
@@ -210,7 +210,7 @@ export class CGSelect implements ICgSelect {
     this.nativeSelectMode = nativeSelectMode;
     this.listDisplayMode = listDisplayMode;
     this.styles = styles;
-    this.lable = lable;
+    this.label = label;
     this.event = event;
     this.selected = selected;
     this.placeholder = placeholder;
@@ -231,14 +231,14 @@ export class CGSelect implements ICgSelect {
       return;
     }
 
-    if (this.lable) {
-      const lableItem = document.createElement('h1');
-      const textLable = document.createTextNode(this.lable);
+    if (this.label) {
+      const labelItem = document.createElement('h1');
+      const textLabel = document.createTextNode(this.label);
 
-      lableItem.appendChild(textLable);
-      lableItem.classList.add('label');
+      labelItem.appendChild(textLabel);
+      labelItem.classList.add('label');
 
-      this.element!.insertAdjacentElement('beforebegin', lableItem);
+      this.element!.insertAdjacentElement('beforebegin', labelItem);
     }
 
     items.forEach((dataItem: any, index: number) => {
@@ -354,7 +354,7 @@ export class CGSelect implements ICgSelect {
     });
 
     this.list = this.element!.querySelector('.list');
-    this.caret = this.element!.querySelector('.caret');
+    this.carriage = this.element!.querySelector('.caret');
 
     if (this.theme) {
       changeTheme(this.element!, this.theme!);
@@ -491,10 +491,10 @@ export class CGSelect implements ICgSelect {
   private open(oneClick?: boolean): void {
     if (oneClick === true) {
       this.list!.classList.add('open');
-      this.caret!.classList.add('caret_rotate');
+      this.carriage!.classList.add('caret_rotate');
     } else {
       this.list!.classList.toggle('open');
-      this.caret!.classList.toggle('caret_rotate');
+      this.carriage!.classList.toggle('caret_rotate');
     }
   }
 
@@ -505,7 +505,7 @@ export class CGSelect implements ICgSelect {
    */
   private close(): void {
     this.list?.classList.remove('open');
-    this.caret?.classList.remove('caret_rotate');
+    this.carriage?.classList.remove('caret_rotate');
   }
 
   /**
@@ -519,7 +519,7 @@ export class CGSelect implements ICgSelect {
     document.addEventListener('click', (e) => {
       const withinBoundaries = e.composedPath().includes(dropdown!);
       if (!withinBoundaries) {
-        if (this.btnCntr) {
+        if (this.buttonAction) {
           return;
         } else {
           this.close();
@@ -815,7 +815,7 @@ export class CGSelect implements ICgSelect {
       return;
     }
 
-    this.btnCntr = button!;
+    this.buttonAction = button!;
     button.addEventListener('click', () => {
       if (method.toLowerCase() === 'open') {
         this.open(true);
@@ -945,6 +945,15 @@ export class CGSelect implements ICgSelect {
         });
         callback(state);
         break;
+      case 'clear':
+        this.element!.addEventListener('click', () => {
+          const svgIcon = this.element?.querySelector('.svg-icon');
+          svgIcon?.addEventListener('click', () => {
+            console.log('list:clear', svgIcon.classList.contains('svg-clear'));
+          });
+        });
+        callback(state);
+        break;
     }
   }
 }
diff --git a/src/components/utils/utils.ts b/src/components/utils/utils.ts
index b98cc95..494062a 100644
--- a/src/components/utils/utils.ts
+++ b/src/components/utils/utils.ts
@@ -143,7 +143,9 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
 
   select!.appendChild(svgIcon);
 
-  svgIcon.addEventListener('click', () => {
+  svgIcon.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
     select!.innerText = '';
 
     nativeOption.forEach((option) => {
diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts
index 0e68c24..63d0b8f 100644
--- a/src/interfaces/cg-select.interface.ts
+++ b/src/interfaces/cg-select.interface.ts
@@ -61,7 +61,7 @@ export interface ICgSelect {
    * An optional parameter that adds a lable before the select.
    * @type {string}
    */
-  lable?: string;
+  label?: string;
   /**
    * An optional parameter that is responsible for customizing the select elements,
    * objects with CSS properties for customizable elements are passed to it.