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

Merge pull request #41 from apuc/fix-request-data
Fix request data
2023-10-04 18:36:56 +03:00 · 2023-10-04 18:28:06 +03:00 · 2023-10-04 18:26:51 +03:00 · 2023-10-04 14:18:35 +03:00 · 2023-06-13 07:01:26 +03:00 · 2023-06-13 06:59:49 +03:00
9 changed files with 311 additions and 78 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -80,3 +80,14 @@ Tested in JS and React. Errors in work in React applications are revealed.
 ##### 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.
--- a/README.md
+++ b/README.md
@ -1,8 +1,8 @@
 # CG-SELECT

-## version ~ 0.3.11
+## 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,10 +167,12 @@ 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) |
-| Comment                   |                 Tested in Js applications and it works.                  |                                               Works only with a crutch in the form `setTimeout()`                                                |                            not yet available                            |                            not yet available                            |
+| 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.                  |                                                The select is initiated inside the `useEffect() `hook                                                |                            not yet available                            |                            The select is initiated inside the `mounted() `hook                            |

 ## History

--- a/READMERU.md
+++ b/READMERU.md
@ -1,8 +1,8 @@
 # CG-SELECT

-## Версия ~ 0.3.11
+## Версия ~ 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,8 +168,8 @@ 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) |
-| Комментарий                 |                     Протестировано в Js приложениях                      |                                                 Работает только с костылем в виде `setTimeout()`                                                 |                             пока недоступно                             |                             пока недоступно                             |
+| 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 приложениях                      |                                                 Инициация селекта происходит внутри хука `useEffect()`                                                 |                             пока недоступно                             |                              Инициация селекта происходит внутри хука `mounted()`                             |

 ## История

--- a/docs/index.html
+++ b/docs/index.html
@ -62,7 +62,7 @@
          </a>

          <a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
-            <h2>version ~ 0.3.1</h2>
+            <h2>version ~ 0.3.12</h2>
          </a>
          <p>
            This component allows you to create a custom select. It offers more flexible
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "cg-select",
-  "version": "0.3.11",
+  "version": "0.3.2",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "cg-select",
-      "version": "0.3.11",
+      "version": "0.3.12",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.21.4",
@ -26,7 +26,7 @@
        "typedoc": "^0.23.28",
        "typescript": "^5.0.2",
        "webpack": "^5.77.0",
-        "webpack-cli": "^5.0.1",
+        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.13.2"
      }
    },
@ -2320,9 +2320,9 @@
      }
    },
    "node_modules/@webpack-cli/configtest": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz",
-      "integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
      "dev": true,
      "engines": {
        "node": ">=14.15.0"
@ -2333,9 +2333,9 @@
      }
    },
    "node_modules/@webpack-cli/info": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
-      "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
      "dev": true,
      "engines": {
        "node": ">=14.15.0"
@ -2346,9 +2346,9 @@
      }
    },
    "node_modules/@webpack-cli/serve": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz",
-      "integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
      "dev": true,
      "engines": {
        "node": ">=14.15.0"
@ -2959,12 +2959,12 @@
      "dev": true
    },
    "node_modules/commander": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
      "dev": true,
      "engines": {
-        "node": "^12.20.0 || >=14"
+        "node": ">=14"
      }
    },
    "node_modules/commondir": {
@ -6416,17 +6416,17 @@
      }
    },
    "node_modules/webpack-cli": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz",
-      "integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
      "dev": true,
      "dependencies": {
        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^2.0.1",
-        "@webpack-cli/info": "^2.0.1",
-        "@webpack-cli/serve": "^2.0.1",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
        "colorette": "^2.0.14",
-        "commander": "^9.4.1",
+        "commander": "^10.0.1",
        "cross-spawn": "^7.0.3",
        "envinfo": "^7.7.3",
        "fastest-levenshtein": "^1.0.12",
@ -8482,23 +8482,23 @@
      }
    },
    "@webpack-cli/configtest": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz",
-      "integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
      "dev": true,
      "requires": {}
    },
    "@webpack-cli/info": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
-      "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
      "dev": true,
      "requires": {}
    },
    "@webpack-cli/serve": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz",
-      "integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
      "dev": true,
      "requires": {}
    },
@ -8945,9 +8945,9 @@
      "dev": true
    },
    "commander": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
      "dev": true
    },
    "commondir": {
@ -11503,17 +11503,17 @@
      }
    },
    "webpack-cli": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz",
-      "integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
      "dev": true,
      "requires": {
        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^2.0.1",
-        "@webpack-cli/info": "^2.0.1",
-        "@webpack-cli/serve": "^2.0.1",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
        "colorette": "^2.0.14",
-        "commander": "^9.4.1",
+        "commander": "^10.0.1",
        "cross-spawn": "^7.0.3",
        "envinfo": "^7.7.3",
        "fastest-levenshtein": "^1.0.12",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "cg-select",
-  "version": "0.3.11",
+  "version": "0.3.2",
  "source": "index.js",
  "main": "dist/main.js",
  "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
@ -40,7 +40,7 @@
    "typedoc": "^0.23.28",
    "typescript": "^5.0.2",
    "webpack": "^5.77.0",
-    "webpack-cli": "^5.0.1",
+    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.13.2"
  },
  "keywords": [
--- a/src/cg-select.ts
+++ b/src/cg-select.ts
@ -46,6 +46,8 @@ export default 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 default 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 default class CGSelect implements ICgSelect {
      nativeSelectMode: true/false,
      listDisplayMode: true/false,
      language: 'ru/en',
+      nameSelect: "titleYouSelect";
+      getRequestUrl: "/endpoint/123";
      styles: {
        head: {
          background: '...',
@ -197,6 +206,8 @@ export default class CGSelect implements ICgSelect {
      styles,
      label,
      event,
+      nameSelect,
+      getRequestUrl,
      selected,
      placeholder,
      theme,
@ -216,6 +227,8 @@ export default 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;
@ -283,7 +296,7 @@ export default class CGSelect implements ICgSelect {
    }

    const ulList = document.createElement('ul');
-    const nativeSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect(this.nameSelect);

    let inputSearch: HTMLInputElement;
    let textNode: Text;
@ -384,7 +397,7 @@ export default 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 = {
@ -613,6 +626,17 @@ export default 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}`);
@ -622,6 +646,17 @@ export default 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);
              }
            }
@ -648,6 +683,16 @@ export default 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);
@ -664,7 +709,7 @@ export default 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');
@ -796,11 +841,12 @@ export default 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!');
    }
  }

@ -811,20 +857,21 @@ export default class CGSelect implements ICgSelect {
   * @method buttonControl
   */
  public buttonControl(button: Element, method: string) {
-    if (this.listDisplayMode) {
-      return;
-    }
-
+    if (!this.listDisplayMode) {
      this.buttonAction = button!;
      button.addEventListener('click', () => {
-      if (method.toLowerCase() === 'open') {
+        switch (method.toLowerCase()) {
+          case 'open':
            this.open(true);
-      } else if (method.toLowerCase() === 'close') {
+            break;
+          case 'close':
            this.close();
-      } else {
-        return;
+            break;
        }
      });
+    } else {
+      throw new Error('Sheet display enabled in listDisplayMode!');
+    }
  }

  /**
@ -836,7 +883,7 @@ export default 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');
@ -875,10 +922,8 @@ export default class CGSelect implements ICgSelect {
   */
  public deleteItem(index: number) {
    if (this.category) {
-      console.log('can`t add item to category');
-      return;
+      throw new Error('Unable to remove item from category!');
    }
-
    const item = this.items[index];

    this.items.splice(index, 1);
@ -901,8 +946,7 @@ export default class CGSelect implements ICgSelect {
   */
  public selectIndex(index: number) {
    if (this.category) {
-      console.log('can`t add item to category');
-      return;
+      throw new Error('Unable to select item from category!');
    }

    const options = this.element!.querySelectorAll('.list__item') as NodeListOf<HTMLElement>;
--- a/src/components/create-element/create-element.ts
+++ b/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;
 }
--- a/src/interfaces/cg-select.interface.ts
+++ b/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: ""}.
Author	SHA1	Message	Date
MaxOvs19	9ed0cb3124	Merge https://github.com/apuc/cg-select	2023-10-04 18:36:56 +03:00
MaxOvs19	5abd09f9d5	Merge pull request #41 from apuc/fix-request-data Fix request data	2023-10-04 18:28:06 +03:00
MaxOvs19	d5bbec2b7f	added new options in select	2023-10-04 18:26:51 +03:00
MaxOvs19	49478b316c	Create new branch	2023-10-04 14:18:35 +03:00
MaxOvs19	5c17582f43	Update READMERU.md	2023-06-13 07:01:26 +03:00
MaxOvs19	92e1cfbe93	Update README.md	2023-06-13 06:59:49 +03:00
MaxOvs19	8fe132d7d1	Fix readme	2023-04-25 12:40:13 +03:00
MaxOvs19	6f4a7d23db	Fixed Readme	2023-04-25 12:33:26 +03:00
MaxOvs19	75eed30d19	Update 0.3.12	2023-04-24 20:36:31 +03:00
MaxOvs19	2f69e4fbbf	Update 0.3.12	2023-04-24 20:24:32 +03:00
Макс Овсяников	913f9b1879	Изменил(а) на 'READMERU.md'	2023-04-20 12:26:46 +03:00
Макс Овсяников	9b056cd0df	Изменил(а) на 'README.md'	2023-04-20 12:26:06 +03:00
Макс Овсяников	a92ec260ac	Изменил(а) на 'READMERU.md'	2023-04-20 12:17:14 +03:00
Макс Овсяников	3c5be8445f	Изменил(а) на 'README.md'	2023-04-20 12:15:51 +03:00
MaxOvs19	da1a41daaa	Update Readme	2023-04-17 17:09:57 +03:00