Merge https://github.com/apuc/cg-select

Fix request data

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 .parcel-cache
+test
 

CHANGELOG.md

@@ -60,10 +60,34 @@ Tested in JS and React. Errors in work in React applications are revealed.
 - Fixed bugs.
 - Changed structure.
 
-### 00.03.2023 - update 0.2.6
+### 01.03.2023 - update 0.2.6
 
 - Added new theme creation mode.
 
-### 00.03.2023 - update 0.2.7
+### 01.03.2023 - update 0.2.7
 
 - Switch to new webpack project builder.
+
+##### 04.03.2023 - fix 0.2.71
+
+- Select import fixed.
+
+### 06.03.2023 - update 0.3.0
+
+- Completely redesigned assembly to webpack and completed the transition to a new platform.
+- Assembly bugs fixed
+
+##### 04.03.2023 - fix 0.3.1
+
+- Fixed import select.
+
+##### 04.03.2023 - fix 0.3.12
+
+- Optimized code.
+- Added error messages when using public methods.
+
+### 04.10.2023 - update 0.3.2
+
+- Added the ability to set the name attribute for further sending data to the server. (\*nameSelect: string)
+- Added a function to POST a request to the server when selecting an item. (\*getRequestUrl: string)
+- Optimized code.

README.md

@@ -1,8 +1,8 @@
 # CG-SELECT
 
-## version ~ 0.2.7
+## version ~ 0.3.2
 
-<a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
+<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
 
 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.
@@ -19,10 +19,22 @@ Customization, multi-selection and live search by elements are available.
 
 ## Installation
 
+#### NPM
+
 ```
 npm i cg-select
 ```
 
+#### CDN
+
+```
+<script src="https://cdn.itguild.info/items/cg-select/latest/main.js"></script>
+```
+
+#### PHP
+
+Repository: <a href="https://git.itguild.info/apuc/php-cg-select-v2">PHP cg-select package integration</a>
+
 ## Usage
 
 ### To create a component, you need:
@@ -67,6 +79,74 @@ const dropdown = new CGSelect({
 });
 ```
 
+### An example of initialization a CGSelect in React.
+
+```javascript
+import { useEffect } from 'react';
+import CGSelect from 'cg-select';
+
+const App = () => {
+  useEffect(() => {
+    const drop = new CGSelect({
+      selector: '.cg-dropdown_selector',
+      placeholder: 'Выберите авто',
+      items: [
+        'BMW',
+        {
+          id: '213sade',
+          title: 'Opel',
+          value: 1,
+        },
+        'Mersedes',
+        'MAN',
+        'Ferari',
+      ],
+    });
+  }, []);
+
+  return (
+    <div className="App">
+      <button className="cg-dropdown cg-dropdown_selector"></button>
+    </div>
+  );
+};
+```
+
+### An example of initialization a CGSelect in Vue.
+
+```javascript
+<template>
+  <div>
+    <button class="cg-dropdown cg-dropdown_selector"></button>
+  </div>
+</template>
+
+<script>
+import CGSelect from "cg-select";
+
+export default {
+  mounted() {
+    const drop = new CGSelect({
+      selector: ".cg-dropdown_selector",
+      placeholder: "Выберите авто",
+      items: [
+        "BMW",
+        {
+          id: "213sade",
+          title: "Opel",
+          value: 1,
+        },
+        "Mersedes",
+        "MAN",
+        "Ferari",
+      ],
+    });
+    console.log(drop);
+  },
+};
+</script>
+```
+
 ## Example of different selects
 
 <a href="https://cg-select.itguild.info/">View live example</a>
@@ -87,13 +167,17 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
 
 ## Compatibility
 
+
+
 | Application Compatibility |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
 | ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
-| CG-SELECT                 | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
+| CG-SELECT                 | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/yes.png"></img> |
-| Comment                   |                 Tested in Js applications and it works.                  |                                               Works only with a crutch in the form `setTimeout()`                                                |                            not yet available                            |                            not yet available                            |
+| Comment                   |                 Tested in Js applications and it works.                  |                                                The select is initiated inside the `useEffect() `hook                                                |                            not yet available                            |                            The select is initiated inside the `mounted() `hook                            |
 
 ## History
 
 16.12.2022 - release version 0.1.0!
 
 20.01.2023 - upgrade to version 0.2.1
+
+06.03.2023 - upgrade to version 0.3.0

READMERU.md

@@ -1,8 +1,8 @@
 # CG-SELECT
 
-## Версия ~ 0.2.7
+## Версия ~ 0.3.2
 
-<a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
+<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/README.md">English README</a>
 
 Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
 Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
@@ -19,10 +19,22 @@
 
 ## Установка
 
+#### NPM
+
 ```
 npm i cg-select
 ```
 
+#### CDN
+
+```
+<script src="https://cdn.itguild.info/items/cg-select/latest/main.js"></script>
+```
+
+#### PHP
+
+Репозиторий: <a href="https://git.itguild.info/apuc/php-cg-select-v2">Интеграция пакета cg-select для PHP</a>
+
 ## Использование
 
 ### Для создания компонента необходимо:
@@ -68,6 +80,74 @@ const dropdown = new CGSelect({
 });
 ```
 
+### Пример инициализации CGSelect в React.
+
+```javascript
+import { useEffect } from 'react';
+import CGSelect from 'cg-select';
+
+const App = () => {
+  useEffect(() => {
+    const drop = new CGSelect({
+      selector: '.cg-dropdown_selector',
+      placeholder: 'Выберите авто',
+      items: [
+        'BMW',
+        {
+          id: '213sade',
+          title: 'Opel',
+          value: 1,
+        },
+        'Mersedes',
+        'MAN',
+        'Ferari',
+      ],
+    });
+  }, []);
+
+  return (
+    <div className="App">
+      <button className="cg-dropdown cg-dropdown_selector"></button>
+    </div>
+  );
+};
+```
+
+### Пример инициализации CGSelect в Vue.
+
+```javascript
+<template>
+  <div>
+    <button class="cg-dropdown cg-dropdown_selector"></button>
+  </div>
+</template>
+
+<script>
+import CGSelect from "cg-select";
+
+export default {
+  mounted() {
+    const drop = new CGSelect({
+      selector: ".cg-dropdown_selector",
+      placeholder: "Выберите авто",
+      items: [
+        "BMW",
+        {
+          id: "213sade",
+          title: "Opel",
+          value: 1,
+        },
+        "Mersedes",
+        "MAN",
+        "Ferari",
+      ],
+    });
+    console.log(drop);
+  },
+};
+</script>
+```
+
 ## Примеры различных вариантов выбора.
 
 <a href="https://cg-select.itguild.info/">Рабочий пример</a>
@@ -88,11 +168,13 @@ const dropdown = new CGSelect({
 
 | Совместимость в приложениях |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
 | --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
-| CG-SELECT                   | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
+| CG-SELECT                   | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | <img src="src/images/no.png"></img> | <img src="src/images/yes.png"></img> |
-| Комментарий                 |                     Протестировано в Js приложениях                      |                                                 Работает только с костылем в виде `setTimeout()`                                                 |                             пока недоступно                             |                             пока недоступно                             |
+| Комментарий                 |                     Протестировано в Js приложениях                      |                                                 Инициация селекта происходит внутри хука `useEffect()`                                                 |                             пока недоступно                             |                              Инициация селекта происходит внутри хука `mounted()`                             |
 
 ## История
 
 16.12.2022 - release version 0.1.0!
 
 20.01.2023 - upgrade to version 0.2.1
+
+06.03.2023 - upgrade to version 0.3.0

docs/index.html

@@ -62,7 +62,7 @@
           </a>
 
           <a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
-            <h2>version ~ 0.2.6</h2>
+            <h2>version ~ 0.3.12</h2>
           </a>
           <p>
             This component allows you to create a custom select. It offers more flexible

index.js

@@ -1,6 +1,3 @@
-import { CGSelect } from './src/cg-select';
+import CGSelect from './src/cg-select';
-
-let select = new CGSelect();
-select.disabled(true);
 
 export default CGSelect;

package.json

@@ -1,8 +1,8 @@
 {
   "name": "cg-select",
-  "version": "0.2.7",
+  "version": "0.3.2",
   "source": "index.js",
-  "main": "dist/index.js",
+  "main": "dist/main.js",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",
@@ -23,22 +23,25 @@
     "url": "https://github.com/apuc/cg-select/issues"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
+    "@types/prettier": "^2.7.2",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
     "jsdoc": "^4.0.0",
     "prettier": "^2.7.1",
     "sass": "^1.60.0",
     "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
     "ts-loader": "^9.4.2",
     "typedoc": "^0.23.28",
     "typescript": "^5.0.2",
-    "webpack": "^5.77.0"
+    "webpack": "^5.77.0",
-  },
+    "webpack-cli": "^5.1.4",
-  "dependencies": {
+    "webpack-dev-server": "^4.13.2"
-    "@types/prettier": "^2.7.2",
-    "css-loader": "^6.7.3",
-    "html-webpack-plugin": "^5.5.0",
-    "style-loader": "^3.3.2",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.1"
   },
   "keywords": [
     "select",

src/cg-select.ts

@@ -32,7 +32,7 @@ import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface';
  * @description This class implements the functionality of a custom select, with customization capabilities.
  * @author Ovsyanikov Maxim
  */
-export class CGSelect implements ICgSelect {
+export default class CGSelect implements ICgSelect {
   selector?: string;
   selected?: string;
   placeholder?: string;
@@ -46,6 +46,8 @@ export class CGSelect implements ICgSelect {
   label?: string;
   styles?: IStyle;
   event?: string;
+  nameSelect?: string;
+  getRequestUrl?: string;
   url?: string;
   multiselect?: boolean;
   multiselectTag?: boolean;
@@ -95,6 +97,11 @@ export class CGSelect implements ICgSelect {
    * @type {Element | null}
    */
   private buttonAction?: Element | null;
+  /**
+   * Array for request
+   * @type {IItems}
+   */
+  private forUrlSelectedItems: IItems[] = [];
 
   /**
    * @param {ICgSelect} setting Object accepting select settings.
@@ -113,6 +120,8 @@ export class CGSelect implements ICgSelect {
       nativeSelectMode: true/false,
       listDisplayMode: true/false,
       language: 'ru/en',
+      nameSelect: "titleYouSelect";
+      getRequestUrl: "/endpoint/123";
       styles: {
         head: {
           background: '...',
@@ -130,10 +139,14 @@ export class CGSelect implements ICgSelect {
    * } 
    */
   constructor(setting: ICgSelect) {
-    this.init(setting);
+    if (setting) {
-    this.render();
+      this.init(setting);
-    this.closeSelectClick();
+      this.render();
-    this.initEvent();
+      this.closeSelectClick();
+      this.initEvent();
+    } else {
+      throw new Error('Specify settings!');
+    }
   }
 
   //Getters
@@ -193,6 +206,8 @@ export class CGSelect implements ICgSelect {
       styles,
       label,
       event,
+      nameSelect,
+      getRequestUrl,
       selected,
       placeholder,
       theme,
@@ -212,6 +227,8 @@ export class CGSelect implements ICgSelect {
     this.styles = styles;
     this.label = label;
     this.event = event;
+    this.nameSelect = nameSelect;
+    this.getRequestUrl = getRequestUrl;
     this.selected = selected;
     this.placeholder = placeholder;
     this.theme = theme;
@@ -279,7 +296,7 @@ export class CGSelect implements ICgSelect {
     }
 
     const ulList = document.createElement('ul');
-    const nativeSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect(this.nameSelect);
 
     let inputSearch: HTMLInputElement;
     let textNode: Text;
@@ -380,7 +397,7 @@ export class CGSelect implements ICgSelect {
     const response = await fetch(this.url!);
     const dataUrl = await response.json();
 
-    const nativeSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect(this.nameSelect!);
 
     dataUrl.forEach((dataItem: IItems, index: number) => {
       const item = {
@@ -609,6 +626,17 @@ export class CGSelect implements ICgSelect {
                   select!.innerText = this.selectedItems.join(',');
                 }
               }
+
+              if (this.getRequestUrl!) {
+                this.forUrlSelectedItems.push(item);
+                fetch(this.getRequestUrl, {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json;charset=utf-8',
+                  },
+                  body: JSON.stringify(this.forUrlSelectedItems),
+                });
+              }
             } else {
               if (this.multiselectTag) {
                 const tagItem = document.getElementById(`tag-${index}-${item.id}`);
@@ -618,6 +646,17 @@ export class CGSelect implements ICgSelect {
               if (Array.isArray(this.selectedItems)) {
                 this.selectedItems.splice(checkIndex, 1);
                 this.indexes.splice(checkIndex, 1);
+
+                if (this.getRequestUrl! && this.forUrlSelectedItems.length > 0) {
+                  this.forUrlSelectedItems.splice(checkIndex, 1);
+                  fetch(this.getRequestUrl, {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json;charset=utf-8',
+                    },
+                    body: JSON.stringify(this.forUrlSelectedItems),
+                  });
+                }
                 nativeOptionMultiple(nativeOption, item.title, false);
               }
             }
@@ -644,6 +683,16 @@ export class CGSelect implements ICgSelect {
             option.classList.remove('active');
           });
           option.classList.add('active');
+
+          if (this.getRequestUrl!) {
+            fetch(this.getRequestUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json;charset=utf-8',
+              },
+              body: JSON.stringify(item),
+            });
+          }
         }
 
         clearSelect(select!, this.element!, selectedItemsClear);
@@ -660,7 +709,7 @@ export class CGSelect implements ICgSelect {
   private selectMode(nativeSelectMode: boolean) {
     let win = window.outerWidth;
 
-    if (nativeSelectMode === true) {
+    if (nativeSelectMode) {
       const select = this.element!.querySelector('.cg-select');
       const list = this.element!.querySelector('.list');
       const nativeSelect = this.element!.querySelector('.nativeSelect');
@@ -792,11 +841,12 @@ export class CGSelect implements ICgSelect {
       const textNoRezult = this.element!.querySelector('.noRezult');
       const textNode = document.createTextNode(textInListSearch);
 
-      search!.setAttribute('placeholder', placeholder);
       search!.setAttribute('placeholder', placeholder);
 
       textNoRezult!.textContent = '';
       textNoRezult!.appendChild(textNode);
+    } else {
+      throw new Error('You cannot change the language if it is not enabled searchMode!');
     }
   }
 
@@ -807,20 +857,21 @@ export class CGSelect implements ICgSelect {
    * @method buttonControl
    */
   public buttonControl(button: Element, method: string) {
-    if (this.listDisplayMode) {
+    if (!this.listDisplayMode) {
-      return;
+      this.buttonAction = button!;
+      button.addEventListener('click', () => {
+        switch (method.toLowerCase()) {
+          case 'open':
+            this.open(true);
+            break;
+          case 'close':
+            this.close();
+            break;
+        }
+      });
+    } else {
+      throw new Error('Sheet display enabled in listDisplayMode!');
     }
-
-    this.buttonAction = button!;
-    button.addEventListener('click', () => {
-      if (method.toLowerCase() === 'open') {
-        this.open(true);
-      } else if (method.toLowerCase() === 'close') {
-        this.close();
-      } else {
-        return;
-      }
-    });
   }
 
   /**
@@ -832,7 +883,7 @@ export class CGSelect implements ICgSelect {
     const select = this.element!.querySelector('.cg-select');
     const nativeSelect = this.element!.querySelector('.nativeSelect');
 
-    if (value === true) {
+    if (value) {
       this.element!.setAttribute('disabled', 'true');
       nativeSelect!.setAttribute('disabled', 'true');
       select!.classList.add('disabled');
@@ -871,10 +922,8 @@ export class CGSelect implements ICgSelect {
    */
   public deleteItem(index: number) {
     if (this.category) {
-      console.log('can`t add item to category');
+      throw new Error('Unable to remove item from category!');
-      return;
     }
-
     const item = this.items[index];
 
     this.items.splice(index, 1);
@@ -897,8 +946,7 @@ export class CGSelect implements ICgSelect {
    */
   public selectIndex(index: number) {
     if (this.category) {
-      console.log('can`t add item to category');
+      throw new Error('Unable to select item from category!');
-      return;
     }
 
     const options = this.element!.querySelectorAll('.list__item') as NodeListOf<HTMLElement>;

src/components/create-element/create-element.ts

@@ -5,10 +5,14 @@ import { ICreateBreadCrumb } from './create-element.interface';
  * The method that creates the native select.
  * @returns {HTMLSelectElement} Returns the created native select.
  */
-export function createNativeSelect(): HTMLSelectElement {
+export function createNativeSelect(nameSelect: string | undefined): HTMLSelectElement {
   const nativeSelect = document.createElement('select');
 
-  nativeSelect.setAttribute('name', 'dataSelect');
+  if (nameSelect == undefined) {
+    nativeSelect.setAttribute('name', 'CgSelect');
+  } else {
+    nativeSelect.setAttribute('name', nameSelect!);
+  }
   nativeSelect.classList.add('nativeSelect');
   return nativeSelect;
 }

src/interfaces/cg-select.interface.ts

@@ -75,6 +75,18 @@ export interface ICgSelect {
    * @type {string}
    */
   event?: string;
+
+  /**
+   * Optional parameter responsible for the native select attribute.
+   * @type {string}
+   */
+  nameSelect?: string;
+
+  /**
+   * Optional parameter responsible for the sending address when selected in the select.
+   * @type {string}
+   */
+  getRequestUrl?: string;
   /**
    * Required parameter (if no other way to get data (items) is specified),
    * data that comes from the backend in the format { id: "", title: "", value: ""}.

webpack.config.js

@@ -5,12 +5,14 @@ module.exports = {
   entry: './index.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'index.js',
+    filename: 'main.js',
     clean: true,
+    library: 'CGSelect',
+    libraryTarget: 'umd',
   },
   // devServer: {
   //   open: true,
-  //   port: 5000,
+  //   port: 5500,
   // },
   module: {
     rules: [
@@ -23,6 +25,17 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: ['style-loader', 'css-loader', 'sass-loader'],
       },
+      {
+        test: /\.(?:js|mjs|cjs)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [['@babel/preset-env', { targets: 'defaults' }]],
+            plugins: ['@babel/plugin-proposal-class-properties'],
+          },
+        },
+      },
     ],
   },
   resolve: {