apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed exemple page and collback

Browse Source
This commit is contained in:
MaxOvs19 2023-02-06 15:24:36 +03:00
parent 993b8855fa
commit bcad805727
8 changed files with 70 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
# CG-SELECT # 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. 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. Customization, multi-selection and live search by elements are available.

46
example/index.html
View File

@ -35,7 +35,7 @@
<div class="container content"> <div class="container content">
<div class="example-select"> <div class="example-select">
<h2 class="example-select_title">Дефолтный селект</h2> <h2 class="example-select_title">Default select</h2>
<form method="get" class="form"> <form method="get" class="form">
<div class="layout-select"> <div class="layout-select">
<button class="cg-dropdown cg-dropdown_one"></button> <button class="cg-dropdown cg-dropdown_one"></button>
@ -43,12 +43,12 @@
<input type="submit" value="Отправить!" class="example-select_submit" /> <input type="submit" value="Отправить!" class="example-select_submit" />
<button type="button" class="check-code" id="first">Посмотреть код</button> <button type="button" class="check-code" id="first">View code</button>
<code id="codeFirst"> <code id="codeFirst">
<pre> <pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span> selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Выберите авто',</span> placeholder: <span class="code__string">'Choose a car',</span>
lable: <span class="code__string">'EXAMPLE',</span> lable: <span class="code__string">'EXAMPLE',</span>
items: [ items: [
<span class="code__string">'BMW',</span> <span class="code__string">'BMW',</span>
@ -76,22 +76,22 @@
</div> </div>
<div class="example-select"> <div class="example-select">
<h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2> <h2 class="example-select_title">Default select with function nativeSelectMode</h2>
<form method="get" class="form"> <form method="get" class="form">
<p style="margin-left: 12px; color: white"> <p style="margin-left: 12px; color: white">
*При мобильном разрешении появляеться нативный селект. *Native select appears on mobile resolution.
</p> </p>
<div class="layout-select"> <div class="layout-select">
<button class="cg-dropdown cg-dropdown_selectNative"></button> <button class="cg-dropdown cg-dropdown_selectNative"></button>
</div> </div>
<button type="button" class="check-code" id="Native">Посмотреть код</button> <button type="button" class="check-code" id="Native">View code</button>
<code id="codeNative"> <code id="codeNative">
<pre> <pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span> selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Выберите авто',</span> placeholder: <span class="code__string">'Choose a car',</span>
nativeSelectMode: <span class="code__keyword">true,</span> nativeSelectMode: <span class="code__keyword">true,</span>
items: [ items: [
<span class="code__string">'BMW',</span> <span class="code__string">'BMW',</span>
@ -119,23 +119,23 @@
</div> </div>
<div class="example-select"> <div class="example-select">
<h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2> <h2 class="example-select_title">Default select with function listDisplayMode</h2>
<form method="get" class="form"> <form method="get" class="form">
<p style="margin-left: 12px; color: white"> <p style="margin-left: 12px; color: white">
*При использовании данного метода лист с выбором появляеться как модальное окно. *When using this method, the selection sheet appears as a modal window.
</p> </p>
<div class="layout-select"> <div class="layout-select">
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button> <button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
</div> </div>
<button type="button" class="check-code" id="six">Посмотреть код</button> <button type="button" class="check-code" id="six">View code</button>
<code id="codeSix"> <code id="codeSix">
<pre> <pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span> selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
placeholder: <span class="code__string">'Выберите авто',</span> placeholder: <span class="code__string">'Choose a car',</span>
listDisplayMode: <span class="code__keyword">true,</span> listDisplayMode: <span class="code__keyword">true,</span>
items: [ items: [
<span class="code__string">'BMW',</span> <span class="code__string">'BMW',</span>
@ -163,11 +163,11 @@
</div> </div>
<div class="example-select"> <div class="example-select">
<h1 class="example-select_title">Селект с данными с URL</h1> <h1 class="example-select_title">Select with data from URL</h1>
<div class="layout-select"> <div class="layout-select">
<button class="cg-dropdown cg-dropdown_three"></button> <button class="cg-dropdown cg-dropdown_three"></button>
</div> </div>
<button type="button" class="check-code" id="second">Посмотреть код</button> <button type="button" class="check-code" id="second">View code</button>
<code id="codeSecond"> <code id="codeSecond">
<pre> <pre>
@ -192,12 +192,12 @@
</div> </div>
<div class="example-select"> <div class="example-select">
<h1 class="example-select_title">Категории</h1> <h1 class="example-select_title">Categories</h1>
<div class="layout-select"> <div class="layout-select">
<button class="cg-dropdown cg-dropdown_categories"></button> <button class="cg-dropdown cg-dropdown_categories"></button>
</div> </div>
<button type="button" class="check-code" id="third">Посмотреть код</button> <button type="button" class="check-code" id="third">View code</button>
<code id="codeThird"> <code id="codeThird">
<pre> <pre>
@ -253,7 +253,7 @@
</div> </div>
<div class="example-select"> <div class="example-select">
<h1 class="example-select_title">Управление с помошью кнопок</h1> <h1 class="example-select_title">Button control</h1>
<div style="margin-bottom: 15px"> <div style="margin-bottom: 15px">
<button class="button__open example-select_submit">Open</button> <button class="button__open example-select_submit">Open</button>
<button class="button__close example-select_submit">Close</button> <button class="button__close example-select_submit">Close</button>
@ -263,13 +263,13 @@
<button class="cg-dropdown cg-dropdown_usedBtn"></button> <button class="cg-dropdown cg-dropdown_usedBtn"></button>
</div> </div>
<button type="button" class="check-code" id="fourth">Посмотреть код</button> <button type="button" class="check-code" id="fourth">View code</button>
<code id="codeFourth"> <code id="codeFourth">
<pre> <pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span> selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
placeholder: <span class="code__string">'Выберите авто',</span> placeholder: <span class="code__string">'Choose a car',</span>
searchMode: <span class="code__keyword">true,</span> searchMode: <span class="code__keyword">true,</span>
items: [ items: [
<span class="code__string">'BMW',</span> <span class="code__string">'BMW',</span>
@ -311,21 +311,23 @@
</div> </div>
<div class="example-select"> <div class="example-select">
<h1 class="example-select_title">Функция disabled</h1> <h1 class="example-select_title">Function disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" /> <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
<label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label> <label for="checkboxDisable" style="color: white">
You agree to the processing of data</label
>
<div class="layout-select"> <div class="layout-select">
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button> <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
</div> </div>
<button type="button" class="check-code" id="fifth">Посмотреть код</button> <button type="button" class="check-code" id="fifth">View code</button>
<code id="codeFifth"> <code id="codeFifth">
<pre> <pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
placeholder: <span class="code__string">'Выберите авто',</span> placeholder: <span class="code__string">'Choose a car',</span>
searchMode: <span class="code__keyword">true,</span> searchMode: <span class="code__keyword">true,</span>
items: [ items: [
<span class="code__string">'BMW',</span> <span class="code__string">'BMW',</span>

18
example/index.js
View File

@ -4,8 +4,8 @@ import './example';
// ------------------------------Обычный селект-------------------- // ------------------------------Обычный селект--------------------
const dropdown = new CGSelect({ const dropdown = new CGSelect({
selector: '.cg-dropdown_one', selector: '.cg-dropdown_one',
placeholder: 'Выберите авто', placeholder: 'Choose a car',
lable: 'EXAMPLE', label: 'EXAMPLE',
items: [ items: [
'BMW', 'BMW',
{ {
@ -28,14 +28,14 @@ const dropdown = new CGSelect({
// multiselect: true, // multiselect: true,
}); });
// dropdown.on('select', function (e) { dropdown.on('clear', function (e) {
// console.log(`this state: ${e}`); console.log(`this state: ${e}`);
// }); });
// ------------------------------NativeSelect----------------------- // ------------------------------NativeSelect-----------------------
const dropdownNativeSelect = new CGSelect({ const dropdownNativeSelect = new CGSelect({
selector: '.cg-dropdown_selectNative', selector: '.cg-dropdown_selectNative',
placeholder: 'Выберите авто', placeholder: 'Choose a car',
nativeSelectMode: true, nativeSelectMode: true,
items: [ items: [
'BMW', 'BMW',
@ -63,7 +63,7 @@ const dropdownNativeSelect = new CGSelect({
// ------------------------------listDisplayMode-------------------- // ------------------------------listDisplayMode--------------------
const dropdownlistDisplayMode = new CGSelect({ const dropdownlistDisplayMode = new CGSelect({
selector: '.cg-dropdown_listDisplayMode', selector: '.cg-dropdown_listDisplayMode',
placeholder: 'Выберите авто', placeholder: 'Choose a car',
listDisplayMode: true, listDisplayMode: true,
items: [ items: [
'BMW', 'BMW',
@ -134,7 +134,7 @@ const dropdown4 = new CGSelect({
//----------------управление с помощью кнопок---------------------------------- //----------------управление с помощью кнопок----------------------------------
const dropdownBtn = new CGSelect({ const dropdownBtn = new CGSelect({
selector: '.cg-dropdown_usedBtn', selector: '.cg-dropdown_usedBtn',
placeholder: 'Выберите авто', placeholder: 'Choose a car',
searchMode: true, searchMode: true,
items: [ items: [
'BMW', 'BMW',
@ -181,7 +181,7 @@ dropdownBtn.buttonControl(buttonClose, 'close');
//-------------------------Функция Disabled---------------------------------- //-------------------------Функция Disabled----------------------------------
const dropdownDisabled = new CGSelect({ const dropdownDisabled = new CGSelect({
selector: '.cg-dropdown_checkboxDisable', selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Выберите авто', placeholder: 'Choose a car',
searchMode: true, searchMode: true,
items: [ items: [
'BMW', 'BMW',

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.2.31", "version": "0.2.32",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cg-select", "name": "cg-select",
"version": "0.2.31", "version": "0.2.32",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@parcel/optimizer-css": "^2.8.0", "@parcel/optimizer-css": "^2.8.0",

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.2.31", "version": "0.2.32",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
"author": { "author": {
"name": "CraftGroup", "name": "CraftGroup",

49
src/cg-select.ts
View File

@ -43,7 +43,7 @@ export class CGSelect implements ICgSelect {
nativeSelectMode?: boolean; nativeSelectMode?: boolean;
listDisplayMode?: boolean; listDisplayMode?: boolean;
language?: string; language?: string;
lable?: string; label?: string;
styles?: IStyle; styles?: IStyle;
event?: string; event?: string;
url?: string; url?: string;
@ -74,7 +74,7 @@ export class CGSelect implements ICgSelect {
* Variable for carriage control. * Variable for carriage control.
* @type {Element | null | undefined} * @type {Element | null | undefined}
*/ */
private caret: Element | null | undefined; private carriage: Element | null | undefined;
/** /**
* Transferred categories. * Transferred categories.
* @type {string} * @type {string}
@ -94,7 +94,7 @@ export class CGSelect implements ICgSelect {
* Button, to control the select. * Button, to control the select.
* @type {Element | null} * @type {Element | null}
*/ */
private btnCntr?: Element | null; private buttonAction?: Element | null;
/** /**
* @param {ICgSelect} setting Object accepting select settings. * @param {ICgSelect} setting Object accepting select settings.
@ -105,7 +105,7 @@ export class CGSelect implements ICgSelect {
* selector: 'Unique selector', * selector: 'Unique selector',
selected: 'Selected item', selected: 'Selected item',
placeholder: '...', placeholder: '...',
lable: '...' label: '...'
items: [string|number|object], items: [string|number|object],
theme: string, theme: string,
searchMode: true/false, searchMode: true/false,
@ -119,9 +119,9 @@ export class CGSelect implements ICgSelect {
}, },
list: {...}, list: {...},
chips: {...}, chips: {...},
caret: {...}, carriage: {...},
placeholder: {...}, placeholder: {...},
lable: {..}, label: {..},
}, },
event: '...', event: '...',
url: 'http/...', url: 'http/...',
@ -191,7 +191,7 @@ export class CGSelect implements ICgSelect {
searchMode, searchMode,
language, language,
styles, styles,
lable, label,
event, event,
selected, selected,
placeholder, placeholder,
@ -210,7 +210,7 @@ export class CGSelect implements ICgSelect {
this.nativeSelectMode = nativeSelectMode; this.nativeSelectMode = nativeSelectMode;
this.listDisplayMode = listDisplayMode; this.listDisplayMode = listDisplayMode;
this.styles = styles; this.styles = styles;
this.lable = lable; this.label = label;
this.event = event; this.event = event;
this.selected = selected; this.selected = selected;
this.placeholder = placeholder; this.placeholder = placeholder;
@ -231,14 +231,14 @@ export class CGSelect implements ICgSelect {
return; return;
} }
if (this.lable) { if (this.label) {
const lableItem = document.createElement('h1'); const labelItem = document.createElement('h1');
const textLable = document.createTextNode(this.lable); const textLabel = document.createTextNode(this.label);
lableItem.appendChild(textLable); labelItem.appendChild(textLabel);
lableItem.classList.add('label'); labelItem.classList.add('label');
this.element!.insertAdjacentElement('beforebegin', lableItem); this.element!.insertAdjacentElement('beforebegin', labelItem);
} }
items.forEach((dataItem: any, index: number) => { items.forEach((dataItem: any, index: number) => {
@ -354,7 +354,7 @@ export class CGSelect implements ICgSelect {
}); });
this.list = this.element!.querySelector('.list'); this.list = this.element!.querySelector('.list');
this.caret = this.element!.querySelector('.caret'); this.carriage = this.element!.querySelector('.caret');
if (this.theme) { if (this.theme) {
changeTheme(this.element!, this.theme!); changeTheme(this.element!, this.theme!);
@ -491,10 +491,10 @@ export class CGSelect implements ICgSelect {
private open(oneClick?: boolean): void { private open(oneClick?: boolean): void {
if (oneClick === true) { if (oneClick === true) {
this.list!.classList.add('open'); this.list!.classList.add('open');
this.caret!.classList.add('caret_rotate'); this.carriage!.classList.add('caret_rotate');
} else { } else {
this.list!.classList.toggle('open'); 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 { private close(): void {
this.list?.classList.remove('open'); 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) => { document.addEventListener('click', (e) => {
const withinBoundaries = e.composedPath().includes(dropdown!); const withinBoundaries = e.composedPath().includes(dropdown!);
if (!withinBoundaries) { if (!withinBoundaries) {
if (this.btnCntr) { if (this.buttonAction) {
return; return;
} else { } else {
this.close(); this.close();
@ -815,7 +815,7 @@ export class CGSelect implements ICgSelect {
return; return;
} }
this.btnCntr = button!; this.buttonAction = button!;
button.addEventListener('click', () => { button.addEventListener('click', () => {
if (method.toLowerCase() === 'open') { if (method.toLowerCase() === 'open') {
this.open(true); this.open(true);
@ -945,6 +945,15 @@ export class CGSelect implements ICgSelect {
}); });
callback(state); callback(state);
break; 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;
} }
} }
} }

4
src/components/utils/utils.ts
View File

@ -143,7 +143,9 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
select!.appendChild(svgIcon); select!.appendChild(svgIcon);
svgIcon.addEventListener('click', () => { svgIcon.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
select!.innerText = ''; select!.innerText = '';
nativeOption.forEach((option) => { nativeOption.forEach((option) => {

2
src/interfaces/cg-select.interface.ts
View File

@ -61,7 +61,7 @@ export interface ICgSelect {
* An optional parameter that adds a lable before the select. * An optional parameter that adds a lable before the select.
* @type {string} * @type {string}
*/ */
lable?: string; label?: string;
/** /**
* An optional parameter that is responsible for customizing the select elements, * An optional parameter that is responsible for customizing the select elements,
* objects with CSS properties for customizable elements are passed to it. * objects with CSS properties for customizable elements are passed to it.