diff --git a/CHANGELOG.md b/CHANGELOG.md index 65f6dc4..eb9d0c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,3 +33,4 @@ Tested in JS and React. Errors in work in React applications are revealed. ### 27.01.2023 - fix 0.2.3 - Changed the theme selection function. +- Fixed documentation. diff --git a/docs/classes/cg_select.CGSelect.html b/docs/classes/cg_select.CGSelect.html index c90a720..32c4983 100644 --- a/docs/classes/cg_select.CGSelect.html +++ b/docs/classes/cg_select.CGSelect.html @@ -1,820 +1,4267 @@ -CGSelect | cg-select
-
- -
-
-
-
- -

Class CGSelect

-
-
-

Description

This class implements the functionality of a custom select, with customization capabilities.

+ + + + + + CGSelect | cg-select + + + + + + + + +
+
+ + +
+
+
+
+
+ +

Class CGSelect

+
+
+
+

Description

+

+ This class implements the functionality of a custom select, with customization + capabilities. +

-

Author

Ovsyanikov Maxim

-
-
-

Hierarchy

-
    -
  • CGSelect
-
-

Implements

-
-
-
-
- -
-
-

Constructors

-
constructor -
-
-

Properties

-
btnCntr? -caret -category? -closeOnSelect? -darkTheme? -element -event? -indexes -items? -lable? -language? -list -listDisplayMode? -multiselect? -multiselectTag? -nativeSelectMode? -options -placeholder? -randomId -searchMode? -selected? -selectedItems -selector? -styles? -url? -
-
-

Accessors

-
indexesOf -value -
-
-

Methods

-
addItem -addLanguage -addOptionsBehaviour -buttonControl -checkTheme -close -closeSelectClick -deleteItem -deleteItemAll -disabled -displayMode -getElement -init -initEvent -initSelected -open -render -renderUrl -searchModeSelect -selectIndex -selectMode -
-
-

Constructors

-
-

constructor

-
    - -
  • -
    -

    Description

    The constructor takes an object and renders the select.

    +

    Author

    +

    Ovsyanikov Maxim

    +
    +
+
+

Hierarchy

+
    +
  • CGSelect
    • +
+
+
+

Implements

+ +
+ +
+
+
+ + + +
+
+

Constructors

+
+ + + constructor +
+
+
+

Properties

+
+ + + btnCntr? + + + caret + + + category? + + + closeOnSelect? + + + theme? + + + element + + + event? + + + indexes + + + items? + + + lable? + + + language? + + + list + + + listDisplayMode? + + + multiselect? + + + multiselectTag? + + + nativeSelectMode? + + + options + + + placeholder? + + + randomId + + + searchMode? + + + selected? + + + selectedItems + + + selector? + + + styles? + + + url? +
+
+
+

Accessors

+
+ + + indexesOf + + + value +
+
+
+

Methods

+
+ + + addItem + + + addLanguage + + + addOptionsBehaviour + + + buttonControl + + + checkTheme + + + close + + + closeSelectClick + + + deleteItem + + + deleteItemAll + + + disabled + + + displayMode + + + getElement + + + init + + + initEvent + + + initSelected + + + open + + + render + + + renderUrl + + + searchModeSelect + + + selectIndex + + + selectMode +
+
+
+
+
+
+
+

Constructors

+
+ +

+ constructor + + + +

+
    + +
  • +
    +

    Description

    +

    The constructor takes an object and renders the select.

    -

    Example

    options = {
     selector: 'Unique selector',
       selected: 'Selected item',
       placeholder: '...',
       lable: '...'
       items: [string|number|object],
       darkTheme: true/false,
       searchMode: true/false,
       closeOnSelect:  true/false,
       nativeSelectMode: true/false,
       listDisplayMode: true/false,
       language: 'ru/en',
       styles: {
         head: {
           background: '...',
         },
         list: {...},
         chips: {...},
         caret: {...},
         placeholder: {...},
         lable: {..},
       },
       event: '...',
       url: 'http/...',
       multiselect: true/false,
       multiselectTag: true/false,
    }
+                  
    Example
    
+                  
    options = {
     selector: 'Unique selector',
       selected: 'Selected item',
       placeholder: '...',
       lable: '...'
       items: [string|number|object],
       theme: string,
       searchMode: true/false,
       closeOnSelect:  true/false,
       nativeSelectMode: true/false,
       listDisplayMode: true/false,
       language: 'ru/en',
       styles: {
         head: {
           background: '...',
         },
         list: {...},
         chips: {...},
         caret: {...},
         placeholder: {...},
         lable: {..},
       },
       event: '...',
       url: 'http/...',
       multiselect: true/false,
       multiselectTag: true/false,
    }
 
    
-
    -
    -

    Parameters

    -
      -
    • -
      setting: ICgSelect
      -

      Object accepting select settings.

      -
    -

    Returns CGSelect

-
-

Properties

-
-

Private Optional btnCntr

-
btnCntr?: null | Element
-

Button, to control the select.

-
-
-

Private caret

-
caret: undefined | null | Element
-

Variable for carriage control.

-
-
-

Private Optional category

-
category?: string
-

Transferred categories.

-
-
-

Optional closeOnSelect

-
closeOnSelect?: boolean
-

An optional parameter that is responsible for the behavior of the select when opening, if closeOnSelect: false, -then when an element is selected in the selector, closing does not occur, -and you can select another element by default, closeOnSelect:true.

-
-
-

Optional darkTheme

-
darkTheme?: boolean
-

An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true).

-
-
-

Private element

-
element: null | Element
-

Created HTML element.

-
-
-

Optional event

-
event?: string
-

An optional parameter that is responsible for the behavior of the select, passing to this parameter an event of the 'mouseenter' type, -select will open on hover.

-
-
-

Private indexes

-
indexes: number[] = []
-

Array of indexes of selected elements.

-
-
-

Optional items

-
items?: any
-

*Required parameter (if no other way to get data (url) is specified), this is an array of elements, - which will be displayed in the select when selected.

-
-
-

Optional lable

-
lable?: string
-

An optional parameter that adds a lable before the select.

-
-
-

Optional language

-
language?: string
-

Optional parameter responsible for the localization of some text elements.

-
-
-

Private list

-
list: null | Element
-

Created list(ul), with class list.

-
-
-

Optional listDisplayMode

-
listDisplayMode?: boolean
-

An optional parameter that is responsible for the behavior of the select when opening.

-
-
-

Optional multiselect

-
multiselect?: boolean
-

An optional parameter, which is responsible for the behavior of the select, adds the ability to select multiple elements. -Selected elements are rendered as plain text, separated by commas.

-
-
-

Optional multiselectTag

-
multiselectTag?: boolean
-

An optional parameter that is responsible for the behavior of the select, -for him, *** works only in a place with a multiselect connection.

-
-
-

Optional nativeSelectMode

-
nativeSelectMode?: boolean
-

An optional parameter that is responsible for the behavior of the select when opened on mobile devices.

-
-
-

Private options

-
options: ICgSelect
-

Select settings passed when creating an instance of the class.

-
-
-

Optional placeholder

-
placeholder?: string
-

Placeholder optional parameter to which the text of the select placeholder is passed.

-
-
-

Private randomId

-
randomId: string
-

Unique Id for elements.

-
-
-

Optional searchMode

-
searchMode?: boolean
-

An optional parameter that adds a live search on the select elements.

-
-
-

Optional selected

-
selected?: string
-

An optional parameter, which is passed the element that will be selected initially in the select.

-
-
-

Private selectedItems

-
selectedItems: string | string[]
-

Selected or an array of selected items from a list.

-
-
-

Optional selector

-
selector?: string
-

Unique selector - *mandatory parameter (indicator) that is set when creating a select.

-
-
-

Optional styles

-
styles?: IStyle
-

An optional parameter that is responsible for customizing the select elements, -objects with CSS properties for customizable elements are passed to it.

-
-
-

Optional url

-
url?: 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: ""}.

-
-
-

Accessors

-
-

indexesOf

-
    -
  • get indexesOf(): number | number[]
    • -
  • -
    -

    Returns

    Returns the indices of the selected element(s) as an array / empty array.

    +
    +
    +

    Parameters

    +
      +
    • +
      + setting: + ICgSelect +
      +
      +

      Object accepting select settings.

      +
      +
      • +
    +
    +

    + Returns + CGSelect +

    + +
    • +
+
+
+
+

Properties

+
+ +

+ Private + Optional btnCntr + + + +

+
+ btnCntr?: + null | Element +
+

Button, to control the select.

+ +
+
+ +

+ Private caret + + + +

+
+ caret: + undefined | null | Element +
+

Variable for carriage control.

+ +
+
+ +

+ Private + Optional category + + + +

+
+ category?: + string +
+

Transferred categories.

+ +
+
+ +

+ Optional + closeOnSelect + + + +

+
+ closeOnSelect?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when + opening, if closeOnSelect: false, then when an element is selected in the selector, + closing does not occur, and you can select another element by default, + closeOnSelect:true. +

+
+ +
+
+ +

+ Optional theme + + + +

+
+ theme?: + string +
+
+

+ An optional parameter responsible for switching between different themes, the + classic theme is set by default. +

+
+ +
+
+ +

+ Private element + + + +

+
+ element: + null | Element +
+

Created HTML element.

+ +
+
+ +

+ Optional event + + + +

+
+ event?: + string +
+
+

+ An optional parameter that is responsible for the behavior of the select, passing to + this parameter an event of the 'mouseenter' type, select will open on hover. +

+
+ +
+
+ +

+ Private indexes + + + +

+
+ indexes: + number[] = [] +
+
+

Array of indexes of selected elements.

+
+ +
+
+ +

+ Optional items + + + +

+
+ items?: + any +
+
+

+ *Required parameter (if no other way to get data (url) is specified), this is an + array of elements, which will be displayed in the select when selected. +

+
+ +
+
+ +

+ Optional lable + + + +

+
+ lable?: + string +
+
+

An optional parameter that adds a lable before the select.

+
+ +
+
+ +

+ Optional language + + + +

+
+ language?: + string +
+
+

Optional parameter responsible for the localization of some text elements.

+
+ +
+
+ +

+ Private list + + + +

+
+ list: + null | Element +
+

Created list(ul), with class list.

+ +
+
+ +

+ Optional + listDisplayMode + + + +

+
+ listDisplayMode?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when + opening. +

+
+ +
+
+ +

+ Optional multiselect + + + +

+
+ multiselect?: + boolean +
+
+

+ An optional parameter, which is responsible for the behavior of the select, adds the + ability to select multiple elements. Selected elements are rendered as plain text, + separated by commas. +

+
+ +
+
+ +

+ Optional + multiselectTag + + + +

+
+ multiselectTag?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select, for him, + *** works only in a place with a multiselect connection. +

+
+ +
+
+ +

+ Optional + nativeSelectMode + + + +

+
+ nativeSelectMode?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when opened + on mobile devices. +

+
+ +
+
+ +

+ Private options + + + +

+
+ options: + ICgSelect +
+
+

Select settings passed when creating an instance of the class.

+
+ +
+
+ +

+ Optional placeholder + + + +

+
+ placeholder?: + string +
+
+

+ Placeholder optional parameter to which the text of the select placeholder is + passed. +

+
+ +
+
+ +

+ Private randomId + + + +

+
+ randomId: + string +
+

Unique Id for elements.

+ +
+
+ +

+ Optional searchMode + + + +

+
+ searchMode?: + boolean +
+
+

An optional parameter that adds a live search on the select elements.

+
+ +
+
+ +

+ Optional selected + + + +

+
+ selected?: + string +
+
+

+ An optional parameter, which is passed the element that will be selected initially + in the select. +

+
+ +
+
+ +

+ Private selectedItems + + + +

+
+ selectedItems: + string | string[] +
+
+

Selected or an array of selected items from a list.

+
+ +
+
+ +

+ Optional selector + + + +

+
+ selector?: + string +
+
+

+ Unique selector - *mandatory parameter (indicator) that is set when creating a + select. +

+
+ +
+
+ +

+ Optional styles + + + +

+
+ styles?: + IStyle +
+
+

+ An optional parameter that is responsible for customizing the select elements, + objects with CSS properties for customizable elements are passed to it. +

+
+ +
+
+ +

+ Optional url + + + +

+
+ url?: + 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: + ""}. +

+
+ +
+
+
+

Accessors

+
+ +

+ indexesOf + + + +

+
    +
  • + get indexesOf(): number | number[] +
    • +
  • +
    +

    Returns

    +

    Returns the indices of the selected element(s) as an array / empty array.

    -

    Description

    A getter that returns the indexes of the selected element(s) of the select.

    -
    -

    Returns number | number[]

-
-

value

-
    -
  • get value(): string | string[]
    • -
  • -
    -

    Returns

    Returns the selected element(s) as an array / element / null.

    +

    Description

    +

    A getter that returns the indexes of the selected element(s) of the select.

    +
    +

    + Returns number | number[] +

    + +
    • +
+
+
+ +

+ value + + + +

+
    +
  • + get value(): string | string[] +
    • +
  • +
    +

    Returns

    +

    Returns the selected element(s) as an array / element / null.

    -

    Description

    Getter returning the selected element(s) of the select.

    -
    -

    Returns string | string[]

-
-

Methods

-
-

addItem

-
    - -
  • -
    -

    Description

    adds the given element to the end of the list and redraws the list. Cannot be used when passing elements with categories.

    +

    Description

    +

    Getter returning the selected element(s) of the select.

    +
    +

    + Returns string | string[] +

    + +
    • +
+
+
+
+

Methods

+
+ +

+ addItem + + + +

+
    + +
  • +
    +

    Description

    +

    + adds the given element to the end of the list and redraws the list. Cannot be + used when passing elements with categories. +

    -

    Method

    addItem

    -
    -
    -

    Parameters

    -
      -
    • -
      item: string | number | IItems
      -

      added element.

      -
    -

    Returns undefined | false

-
-

addLanguage

-
    - -
  • -
    -

    Description

    a method that allows you to change the placeholder in the search and the text that is displayed if there is no result.

    +

    Method

    +

    addItem

    +
    +
    +

    Parameters

    +
      +
    • +
      + item: string | number | IItems +
      +

      added element.

      +
      • +
    +
    +

    + Returns undefined | false +

    + +
    • +
+
+
+ +

+ addLanguage + + + +

+
    + +
  • +
    +

    Description

    +

    + a method that allows you to change the placeholder in the search and the text + that is displayed if there is no result. +

    -

    Method

    addLanguage

    -
    -
    -

    Parameters

    -
      -
    • -
      language: ILanguage
      -

      the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.

      -
    -

    Returns void

-
-

Private addOptionsBehaviour

-
    - -
  • Private -
    -

    Description

    A method that implements the selection of elements in different modes.

    +

    Method

    +

    addLanguage

    +
    +
    +

    Parameters

    +
      +
    • +
      + language: + ILanguage +
      +
      +

      + the object in which the fields for connecting the language are located has + two mandatory fields placeholder, textInListSearch, selectPlaceholder. +

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private + addOptionsBehaviour + + + +

+
    + +
  • + Private +
    +

    Description

    +

    A method that implements the selection of elements in different modes.

    -

    Method

    addOptionsBehaviour

    -
    -

    Returns void

-
-

buttonControl

-
    - -
  • -
    -

    Description

    A method that allows you to open / close the select using buttons.

    +

    Method

    +

    addOptionsBehaviour

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ buttonControl + + + +

+
    + +
  • +
    +

    Description

    +

    A method that allows you to open / close the select using buttons.

    -

    Method

    buttonControl

    -
    -
    -

    Parameters

    -
      -
    • -
      button: Element
      -

      HTML button.

      -
      • -
    • -
      method: string
      -

      open/close method.

      -
    -

    Returns void

-
-

Private checkTheme

-
    - -
  • Private -
    -

    Method

    checkTheme

    +

    Method

    +

    buttonControl

    +
    +
    +

    Parameters

    +
      +
    • +
      button: Element
      +

      HTML button.

      +
      • +
    • +
      method: string
      +

      open/close method.

      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private checkTheme + + + +

+
    + +
  • + Private +
    +

    Method

    +

    checkTheme

    -

    Description

    Changes the color scheme from dark to light.

    -
    -

    Returns void

-
-

Private close

-
    - -
  • Private -
    -

    Description

    Closes the list.

    +

    Description

    +

    Changes the color scheme from dark to light.

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private close + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Closes the list.

    -

    Method

    close

    -
    -

    Returns void

-
-

Private closeSelectClick

-
    - -
  • Private -
    -

    Description

    Closes the list on click outside of an element.

    +

    Method

    +

    close

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private + closeSelectClick + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Closes the list on click outside of an element.

    -

    Method

    closeSelectClick

    -
    -

    Returns void

-
-

deleteItem

-
    - -
  • -
    -

    Description

    removes the element by index from the list and redraws it. Cannot be used when passing elements with categories.

    +

    Method

    +

    closeSelectClick

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ deleteItem + + + +

+
    + +
  • +
    +

    Description

    +

    + removes the element by index from the list and redraws it. Cannot be used when + passing elements with categories. +

    -

    Method

    deleteItem

    -
    -
    -

    Parameters

    -
      -
    • -
      index: number
      -

      the index of the element to be removed.

      -
    -

    Returns void

-
-

deleteItemAll

-
    - -
  • -
    -

    Description

    removes all elements from the list and redraws it.

    +

    Method

    +

    deleteItem

    +
    +
    +

    Parameters

    +
      +
    • +
      index: number
      +
      +

      the index of the element to be removed.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ deleteItemAll + + + +

+
    + +
  • +
    +

    Description

    +

    removes all elements from the list and redraws it.

    -

    Method

    deleteItemAll

    -
    -

    Returns void

-
-

disabled

-
    - -
  • -
    -

    Description

    A method that allows you to toggle the state of the disabled select.

    +

    Method

    +

    deleteItemAll

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ disabled + + + +

+
    + +
  • +
    +

    Description

    +

    A method that allows you to toggle the state of the disabled select.

    -

    Method

    disabled

    -
    -
    -

    Parameters

    -
      -
    • -
      value: boolean
      -

      Passed parameter to add the disabled attribute.

      -
    -

    Returns void

-
-

Private displayMode

-
    - -
  • Private -
    -

    Description

    Changes the display of a sheet with a selection as a modal window.

    +

    Method

    +

    disabled

    +
    +
    +

    Parameters

    +
      +
    • +
      value: boolean
      +
      +

      Passed parameter to add the disabled attribute.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private displayMode + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Changes the display of a sheet with a selection as a modal window.

    -

    Method

    displayMode

    -
    -
    -

    Parameters

    -
      -
    • -
      listDisplayMode: boolean
      -

      parameter responsible for displaying the selection in the form of a modal window.

      -
    -

    Returns void

-
-

getElement

-
    - -
  • -
    -

    Returns

    returns a reference to the selected HTML element.

    +

    Method

    +

    displayMode

    +
    +
    +

    Parameters

    +
      +
    • +
      listDisplayMode: boolean
      +
      +

      + parameter responsible for displaying the selection in the form of a modal + window. +

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ getElement + + + +

+
    + +
  • +
    +

    Returns

    +

    returns a reference to the selected HTML element.

    -

    Method

    getElement

    -
    -
    -

    Parameters

    -
      -
    • -
      numberItem: number
      -

      returned element number.

      -
    -

    Returns any

-
-

Private init

-
    - -
  • Private -

    Private method for initializing an instance of the ICgSelect class.

    +

    Method

    +

    getElement

    +
    +
    +

    Parameters

    +
      +
    • +
      numberItem: number
      +

      returned element number.

      +
      • +
    +
    +

    + Returns any +

    + +
    • +
+
+
+ +

+ Private init + + + +

+
    + +
  • + Private +
    +

    Private method for initializing an instance of the ICgSelect class.

    -

    Method

    init

    +

    Method

    +

    init

    -

    Member

    -

    Description

    Private method. General initialization of the select. Obtaining tinctures and converting select elements.

    +

    Member

    +

    Description

    +

    + Private method. General initialization of the select. Obtaining tinctures and + converting select elements. +

    -

    Example

    {
            selector: '.cg-dropdown_one',
            placeholder: 'Choose a car',
            items: [
              'BMW',
              {
                id: '213sade',
                title: 'Opel',
                value: 1,
              },
              'Mersedes',
              'MAN',
              'max',
            ],
            darkTheme: true,
            multiselect: true,
            multiselectTag: true,
          }
+                  
    Example
    
+                  
    {
            selector: '.cg-dropdown_one',
            placeholder: 'Choose a car',
            items: [
              'BMW',
              {
                id: '213sade',
                title: 'Opel',
                value: 1,
              },
              'Mersedes',
              'MAN',
              'max',
            ],
            theme: true,
            multiselect: true,
            multiselectTag: true,
          }
 
    
-
    -
    -

    Parameters

    -
      -
    • -
      setting: ICgSelect
      -

      passed select settings.

      -
    -

    Returns void

-
-

Private initEvent

-
    - -
  • Private -
    -

    Description

    Opens and closes the list by the passed event.

    +
    +
    +

    Parameters

    +
      +
    • +
      + setting: + ICgSelect +
      +

      passed select settings.

      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private initEvent + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Opens and closes the list by the passed event.

    -

    Method

    initEvent

    -
    -

    Returns void

-
-

Private initSelected

-
    - -
  • Private -
    -

    Method

    initSelected

    +

    Method

    +

    initEvent

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private initSelected + + + +

+
    + +
  • + Private +
    +

    Method

    +

    initSelected

    -

    Description

    Renders and styles the select.

    -
    -
    -

    Parameters

    -
      -
    • -
      Optional select: string
      -

      optional element. Used in the selectedIndex method.

      -
    -

    Returns void

-
-

Private open

-
    - -
  • Private -
    -

    Description

    Opens a list to select an element.

    +

    Description

    +

    Renders and styles the select.

    +
    +
    +

    Parameters

    +
      +
    • +
      + Optional select: + string +
      +
      +

      optional element. Used in the selectedIndex method.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private open + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Opens a list to select an element.

    -

    Method

    open

    -
    -
    -

    Parameters

    -
      -
    • -
      Optional oneClick: boolean
      -

      optional parameter passed from the buttonControl function.

      -
    -

    Returns void

-
-

Private render

-
    - -
  • Private -
    -

    Method

    render

    +

    Method

    +

    open

    +
    +
    +

    Parameters

    +
      +
    • +
      + Optional oneClick: + boolean +
      +
      +

      optional parameter passed from the buttonControl function.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private render + + + +

+
    + +
  • + Private +
    +

    Method

    +

    render

    -

    Description

    Render elements in select.

    -
    -
    -

    Parameters

    -
      -
    • -
      Optional select: string
      -

      optional element. Passed to the initSelected.

      -
    -

    Returns void

-
-

Private renderUrl

-
    - -
  • Private -
    -

    Method

    renderUrl

    +

    Description

    +

    Render elements in select.

    +
    +
    +

    Parameters

    +
      +
    • +
      + Optional select: + string +
      +
      +

      optional element. Passed to the initSelected.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private renderUrl + + + +

+
    + +
  • + Private +
    +

    Method

    +

    renderUrl

    -

    Description

    Rendering elements in the select passed from the URL and setting them up.

    -
    -

    Returns Promise<void>

-
-

Private searchModeSelect

-
    - -
  • Private -
    -

    Description

    The method that implements the search for elements in the select.

    +

    Description

    +

    Rendering elements in the select passed from the URL and setting them up.

    +
    +

    + Returns Promise<void> +

    + +
    • +
+
+
+ +

+ Private + searchModeSelect + + + +

+
    + +
  • + Private +
    +

    Description

    +

    The method that implements the search for elements in the select.

    -

    Method

    searchMode

    -
    -
    -

    Parameters

    -
      -
    • -
      random: string
      -

      unique value for input element.

      -
    -

    Returns void

-
-

selectIndex

-
    - -
  • -
    -

    Description

    selects the element that will be initially rendered in the select.

    +

    Method

    +

    searchMode

    +
    +
    +

    Parameters

    +
      +
    • +
      random: string
      +
      +

      unique value for input element.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ selectIndex + + + +

+
    + +
  • +
    +

    Description

    +

    selects the element that will be initially rendered in the select.

    -

    Method

    selectIndex

    -
    -
    -

    Parameters

    -
      -
    • -
      index: number
      -

      the index of the selected element.

      -
    -

    Returns void

-
-

Private selectMode

-
    - -
  • Private -
    -

    Description

    Changes the display of the select on mobile devices.

    +

    Method

    +

    selectIndex

    +
    +
    +

    Parameters

    +
      +
    • +
      index: number
      +
      +

      the index of the selected element.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private selectMode + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Changes the display of the select on mobile devices.

    -

    Method

    selectMode

    -
    -
    -

    Parameters

    -
      -
    • -
      nativeSelectMode: boolean
      -

      parameter responsible for adding native select.

      -
    -

    Returns void

-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
    • -
    • -
-
-

Theme

- -
-
-

Generated using TypeDoc

-
\ No newline at end of file +

Method

+

selectMode

+
+
+

Parameters

+
    +
  • +
    nativeSelectMode: boolean
    +
    +

    parameter responsible for adding native select.

    +
    +
    • +
+
+

+ Returns void +

+ + + +
+ +
+
+
+
+ +

+ + + + Settings +

+ +
+
+

Member Visibility

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

Theme

+ +
+
+
+
+ + +
+
+
+

Generated using TypeDoc

+
+
+ + + diff --git a/docs/index.html b/docs/index.html index e693d31..b78131b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -61,7 +61,7 @@ -

version ~ 0.2.2

+

version ~ 0.2.3

This component allows you to create a custom select. It offers more flexible @@ -223,7 +223,7 @@

16.12.2022 - release version 0.1.0!
- 00.00.2023 - upgrade to version 0.2.1 + 20.01.2023 - upgrade to version 0.2.1

diff --git a/docs/interfaces/components_utils_urils_interface.ISelectedItems.html b/docs/interfaces/components_utils_urils_interface.ISelectedItems.html index 524e48d..172a642 100644 --- a/docs/interfaces/components_utils_urils_interface.ISelectedItems.html +++ b/docs/interfaces/components_utils_urils_interface.ISelectedItems.html @@ -1,130 +1,737 @@ -ISelectedItems | cg-select
-
- -
-
-
-
- -

Interface ISelectedItems

-
-
-

Description

Settings for select text, etc.

-
-
-

Hierarchy

-
    -
  • ISelectedItems
-
-
-
- -
-
-

Properties

-
darkTheme? -indexes? -multiselectTag? -placeholder? -selected? -selectedItems? -
-
-

Properties

-
-

Optional darkTheme

-
darkTheme?: boolean
-

An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.

-
-
-

Optional indexes

-
indexes?: number[]
-

Array of indexes of selected elements.

-
-
-

Optional multiselectTag

-
multiselectTag?: boolean
-

An optional parameter that is responsible for the behavior of the select, -for him, *** works only in a place with a multiselect connection.

-
-
-

Optional placeholder

-
placeholder?: string
-

Placeholder optional parameter to which the text of the select placeholder is passed.

-
-
-

Optional selected

-
selected?: string
-

An optional parameter, which is passed the element that will be selected initially in the select.

-
-
-

Optional selectedItems

-
selectedItems?: string[]
-

Array of selected items from the list.

-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
    • -
    • -
-
-

Theme

- -
-
-

Generated using TypeDoc

-
\ No newline at end of file + + + + + + ISelectedItems | cg-select + + + + + + + + +
+
+ + +
+
+
+
+
+ +

Interface ISelectedItems

+
+
+
+

Description

+

Settings for select text, etc.

+
+
+
+

Hierarchy

+
    +
  • ISelectedItems
    • +
+
+ +
+
+
+ + + +
+
+

Properties

+
+ + + darkTheme? + + + indexes? + + + multiselectTag? + + + placeholder? + + + selected? + + + selectedItems? +
+
+
+
+
+
+
+

Properties

+
+ +

+ Optional theme + + + +

+
+ theme?: + string +
+
+

+ An optional parameter that is responsible for enabling a light/dark theme by + default, the dark theme is set. +

+
+ +
+
+ +

+ Optional indexes + + + +

+
+ indexes?: + number[] +
+
+

Array of indexes of selected elements.

+
+ +
+
+ +

+ Optional + multiselectTag + + + +

+
+ multiselectTag?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select, for him, + *** works only in a place with a multiselect connection. +

+
+ +
+
+ +

+ Optional placeholder + + + +

+
+ placeholder?: + string +
+
+

+ Placeholder optional parameter to which the text of the select placeholder is + passed. +

+
+ +
+
+ +

+ Optional selected + + + +

+
+ selected?: + string +
+
+

+ An optional parameter, which is passed the element that will be selected initially + in the select. +

+
+ +
+
+ +

+ Optional selectedItems + + + +

+
+ selectedItems?: + string[] +
+
+

Array of selected items from the list.

+
+ +
+
+
+
+
+
+ +

+ + + + Settings +

+ +
+
+

Member Visibility

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

Theme

+ +
+
+
+
+ + +
+
+
+

Generated using TypeDoc

+
+
+ + + diff --git a/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html b/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html index ea22066..927e9f9 100644 --- a/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html +++ b/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html @@ -1,231 +1,1343 @@ -ICgSelect | cg-select
-
- -
-
-
-
- -

Interface ICgSelect

-
-
-

Description

Select settings.

-
-
-

Hierarchy

-
    -
  • ICgSelect
-
-

Implemented by

-
-
-
-
- -
-
-

Properties

-
closeOnSelect? -darkTheme? -event? -items? -lable? -language? -listDisplayMode? -multiselect? -multiselectTag? -nativeSelectMode? -placeholder? -searchMode? -selected? -selector? -styles? -url? -
-
-

Properties

-
-

Optional closeOnSelect

-
closeOnSelect?: boolean
-

An optional parameter that is responsible for the behavior of the select when opening, if closeOnSelect: false, -then when an element is selected in the selector, closing does not occur, -and you can select another element by default, closeOnSelect:true.

-
-
-

Optional darkTheme

-
darkTheme?: boolean
-

An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true).

-
-
-

Optional event

-
event?: string
-

An optional parameter that is responsible for the behavior of the select, passing to this parameter an event of the 'mouseenter' type, -select will open on hover.

-
-
-

Optional items

-
items?: any
-

*Required parameter (if no other way to get data (url) is specified), this is an array of elements, - which will be displayed in the select when selected.

-
-
-

Optional lable

-
lable?: string
-

An optional parameter that adds a lable before the select.

-
-
-

Optional language

-
language?: string
-

Optional parameter responsible for the localization of some text elements.

-
-
-

Optional listDisplayMode

-
listDisplayMode?: boolean
-

An optional parameter that is responsible for the behavior of the select when opening.

-
-
-

Optional multiselect

-
multiselect?: boolean
-

An optional parameter, which is responsible for the behavior of the select, adds the ability to select multiple elements. -Selected elements are rendered as plain text, separated by commas.

-
-
-

Optional multiselectTag

-
multiselectTag?: boolean
-

An optional parameter that is responsible for the behavior of the select, -for him, *** works only in a place with a multiselect connection.

-
-
-

Optional nativeSelectMode

-
nativeSelectMode?: boolean
-

An optional parameter that is responsible for the behavior of the select when opened on mobile devices.

-
-
-

Optional placeholder

-
placeholder?: string
-

Placeholder optional parameter to which the text of the select placeholder is passed.

-
-
-

Optional searchMode

-
searchMode?: boolean
-

An optional parameter that adds a live search on the select elements.

-
-
-

Optional selected

-
selected?: string
-

An optional parameter, which is passed the element that will be selected initially in the select.

-
-
-

Optional selector

-
selector?: string
-

Unique selector - *mandatory parameter (indicator) that is set when creating a select.

-
-
-

Optional styles

-
styles?: IStyle
-

An optional parameter that is responsible for customizing the select elements, -objects with CSS properties for customizable elements are passed to it.

-
-
-

Optional url

-
url?: 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: ""}.

-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
    • -
    • -
-
-

Theme

- -
-
-

Generated using TypeDoc

-
\ No newline at end of file + + + + + + ICgSelect | cg-select + + + + + + + + +
+
+ + +
+
+
+
+
+ +

Interface ICgSelect

+
+
+
+

Description

+

Select settings.

+
+
+
+

Hierarchy

+
    +
  • ICgSelect
    • +
+
+
+

Implemented by

+ +
+ +
+
+
+ + + +
+
+

Properties

+
+ + + closeOnSelect? + + + theme? + + + event? + + + items? + + + lable? + + + language? + + + listDisplayMode? + + + multiselect? + + + multiselectTag? + + + nativeSelectMode? + + + placeholder? + + + searchMode? + + + selected? + + + selector? + + + styles? + + + url? +
+
+
+
+
+
+
+

Properties

+
+ +

+ Optional + closeOnSelect + + + +

+
+ closeOnSelect?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when + opening, if closeOnSelect: false, then when an element is selected in the selector, + closing does not occur, and you can select another element by default, + closeOnSelect:true. +

+
+ +
+
+ +

+ Optional theme + + + +

+
+ theme?: + string +
+
+

+ An optional parameter responsible for switching between different themes, the + classic theme is set by default. +

+
+ +
+
+ +

+ Optional event + + + +

+
+ event?: + string +
+
+

+ An optional parameter that is responsible for the behavior of the select, passing to + this parameter an event of the 'mouseenter' type, select will open on hover. +

+
+ +
+
+ +

+ Optional items + + + +

+
+ items?: + any +
+
+

+ *Required parameter (if no other way to get data (url) is specified), this is an + array of elements, which will be displayed in the select when selected. +

+
+ +
+
+ +

+ Optional lable + + + +

+
+ lable?: + string +
+
+

An optional parameter that adds a lable before the select.

+
+ +
+
+ +

+ Optional language + + + +

+
+ language?: + string +
+
+

Optional parameter responsible for the localization of some text elements.

+
+ +
+
+ +

+ Optional + listDisplayMode + + + +

+
+ listDisplayMode?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when + opening. +

+
+ +
+
+ +

+ Optional multiselect + + + +

+
+ multiselect?: + boolean +
+
+

+ An optional parameter, which is responsible for the behavior of the select, adds the + ability to select multiple elements. Selected elements are rendered as plain text, + separated by commas. +

+
+ +
+
+ +

+ Optional + multiselectTag + + + +

+
+ multiselectTag?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select, for him, + *** works only in a place with a multiselect connection. +

+
+ +
+
+ +

+ Optional + nativeSelectMode + + + +

+
+ nativeSelectMode?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when opened + on mobile devices. +

+
+ +
+
+ +

+ Optional placeholder + + + +

+
+ placeholder?: + string +
+
+

+ Placeholder optional parameter to which the text of the select placeholder is + passed. +

+
+ +
+
+ +

+ Optional searchMode + + + +

+
+ searchMode?: + boolean +
+
+

An optional parameter that adds a live search on the select elements.

+
+ +
+
+ +

+ Optional selected + + + +

+
+ selected?: + string +
+
+

+ An optional parameter, which is passed the element that will be selected initially + in the select. +

+
+ +
+
+ +

+ Optional selector + + + +

+
+ selector?: + string +
+
+

+ Unique selector - *mandatory parameter (indicator) that is set when creating a + select. +

+
+ +
+
+ +

+ Optional styles + + + +

+
+ styles?: + IStyle +
+
+

+ An optional parameter that is responsible for customizing the select elements, + objects with CSS properties for customizable elements are passed to it. +

+
+ +
+
+ +

+ Optional url + + + +

+
+ url?: + 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: + ""}. +

+
+ +
+
+
+
+
+
+ +

+ + + + Settings +

+ +
+
+

Member Visibility

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

Theme

+ +
+
+
+
+ + +
+
+
+

Generated using TypeDoc

+
+
+ + +