diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c968bb..3dd1711 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,3 +59,7 @@ Tested in JS and React. Errors in work in React applications are revealed. - Moving an example using a select to a separate repository. - Fixed bugs. - Changed structure. + +### 00.03.2023 - update 0.2.6 + +- Added new theme creation mode. diff --git a/README.md b/README.md index 5139058..8d60272 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # CG-SELECT -## version ~ 0.2.5 +## version ~ 0.2.6 + +ЧИТАТЬ НА РУССКОМ 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. @@ -67,20 +69,13 @@ const dropdown = new CGSelect({ ## Example of different selects -Same working example -- https://cg-select.itguild.info/ - -![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png) -![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png) -![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png) -![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png) +View live example Built-in themes are also available: dark, white. To apply them, specify the theme attribute in the select settings and pass one of the values ​​into it dark or white. All documentation on CG-SELECT is located in the folder of the same name. The documentation describes all methods and variables, there are also examples of passing settings to select. You can also open it on the page with an example, or follow the link below. -**To view it, follow the link -** https://cg-select.itguild.info/up_/documentation/index.html - -**Russian version README -** https://github.com/apuc/cg-select/blob/main/READMERU.md +Documentation ## Contributing @@ -95,7 +90,7 @@ All documentation on CG-SELECT is located in the folder of the same name. The do | 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 | +| Comment | Tested in Js applications and it works. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available | ## History diff --git a/READMERU.md b/READMERU.md index 8478ccb..5d7e9f5 100644 --- a/READMERU.md +++ b/READMERU.md @@ -1,6 +1,8 @@ # CG-SELECT -## version ~ 0.2.5 +## Версия ~ 0.2.6 + +English README Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select. Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое. @@ -15,13 +17,13 @@ - Переключить тему с темной на светлую. - Так же в документации указанны все элементы для катомизации с помощью CSS. -## Installation +## Установка ``` npm i cg-select ``` -## Usage +## Использование ### Для создания компонента необходимо: @@ -68,33 +70,28 @@ const dropdown = new CGSelect({ ## Примеры различных вариантов выбора. -Рабочий пример -- https://cg-select.itguild.info/ - -![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png) -![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png) -![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png) -![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png) +Рабочий пример Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в CGSelect. Вы также можете открыть его на странице с примером, или перейти по ссылке ниже. -**Для просмотра перейдите по ссылке -** https://cg-select.itguild.info/up_/documentation/index.html +Документация -## Contributing +## Содействие -1. Fork it! -2. Create your feature branch: `git checkout -b my-new-feature` -3. Commit your changes: `git commit -am 'Add some feature'` -4. Push to the branch: `git push origin my-new-feature` -5. Submit a pull request :D +1. Сделайте Fork! +2. Создайте свою ветку: `git checkout -b my-new-feature` +3. Зафиксируйте свои изменения: `git commit -am 'Add some feature'` +4. Загрузите ветку: `git push origin my-new-feature` +5. Отправте запрос на вытягивание изменений :D -## 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 | +| Совместимость в приложениях | 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()` | пока недоступно | пока недоступно | -## History +## История 16.12.2022 - release version 0.1.0! diff --git a/docs/classes/cg_select.CGSelect.html b/docs/classes/cg_select.CGSelect.html index bb487e6..68cea37 100644 --- a/docs/classes/cg_select.CGSelect.html +++ b/docs/classes/cg_select.CGSelect.html @@ -3803,6 +3803,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.checkItemStruct.html b/docs/functions/Utils.checkItemStruct.html index 756b5e5..b275bba 100644 --- a/docs/functions/Utils.checkItemStruct.html +++ b/docs/functions/Utils.checkItemStruct.html @@ -242,6 +242,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.clearSelect.html b/docs/functions/Utils.clearSelect.html index f5a17f0..d71fe1e 100644 --- a/docs/functions/Utils.clearSelect.html +++ b/docs/functions/Utils.clearSelect.html @@ -267,6 +267,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.createSelected.html b/docs/functions/Utils.createSelected.html index ec58d35..bd26c36 100644 --- a/docs/functions/Utils.createSelected.html +++ b/docs/functions/Utils.createSelected.html @@ -273,6 +273,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.customStyles.html b/docs/functions/Utils.customStyles.html index 7f5b738..a6ae8c7 100644 --- a/docs/functions/Utils.customStyles.html +++ b/docs/functions/Utils.customStyles.html @@ -260,6 +260,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.customStylesFormat.html b/docs/functions/Utils.customStylesFormat.html index f0a3bca..9fca430 100644 --- a/docs/functions/Utils.customStylesFormat.html +++ b/docs/functions/Utils.customStylesFormat.html @@ -249,6 +249,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.getFormatItem.html b/docs/functions/Utils.getFormatItem.html index 1de90db..80e6f14 100644 --- a/docs/functions/Utils.getFormatItem.html +++ b/docs/functions/Utils.getFormatItem.html @@ -258,6 +258,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.getSelectText.html b/docs/functions/Utils.getSelectText.html index c4b077f..5750198 100644 --- a/docs/functions/Utils.getSelectText.html +++ b/docs/functions/Utils.getSelectText.html @@ -272,6 +272,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.nativeOptionMultiple.html b/docs/functions/Utils.nativeOptionMultiple.html index 2c30dc4..5c611de 100644 --- a/docs/functions/Utils.nativeOptionMultiple.html +++ b/docs/functions/Utils.nativeOptionMultiple.html @@ -266,6 +266,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/Utils.nativeOptionOrdinary.html b/docs/functions/Utils.nativeOptionOrdinary.html index f137a6a..21a2479 100644 --- a/docs/functions/Utils.nativeOptionOrdinary.html +++ b/docs/functions/Utils.nativeOptionOrdinary.html @@ -257,6 +257,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/components_create_element_create_element.createBreadCrumb.html b/docs/functions/components_create_element_create_element.createBreadCrumb.html index 909a72b..9b8da0f 100644 --- a/docs/functions/components_create_element_create_element.createBreadCrumb.html +++ b/docs/functions/components_create_element_create_element.createBreadCrumb.html @@ -283,6 +283,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/components_create_element_create_element.createInputSearch.html b/docs/functions/components_create_element_create_element.createInputSearch.html index c8c2a64..c3e3480 100644 --- a/docs/functions/components_create_element_create_element.createInputSearch.html +++ b/docs/functions/components_create_element_create_element.createInputSearch.html @@ -255,6 +255,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/components_create_element_create_element.createNativeSelect.html b/docs/functions/components_create_element_create_element.createNativeSelect.html index 340b746..7f64539 100644 --- a/docs/functions/components_create_element_create_element.createNativeSelect.html +++ b/docs/functions/components_create_element_create_element.createNativeSelect.html @@ -232,6 +232,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/components_create_element_create_element.createNativeSelectOption.html b/docs/functions/components_create_element_create_element.createNativeSelectOption.html index 46124b9..e890a58 100644 --- a/docs/functions/components_create_element_create_element.createNativeSelectOption.html +++ b/docs/functions/components_create_element_create_element.createNativeSelectOption.html @@ -233,6 +233,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/functions/components_theme_theme.changeTheme.html b/docs/functions/components_theme_theme.changeTheme.html index b571cfc..4ff85f5 100644 --- a/docs/functions/components_theme_theme.changeTheme.html +++ b/docs/functions/components_theme_theme.changeTheme.html @@ -70,6 +70,18 @@ class="tsd-signature-symbol" >: string | CustomTheme | CustomThemeJson): voidelement: Element
  • -
    theme: string
    +
    + theme: string | CustomTheme | CustomThemeJson +
    • @@ -114,8 +141,8 @@
  • Defined in components/theme/theme.ts:1theme.ts:4
    • @@ -237,6 +264,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/index.html b/docs/index.html index 949c04a..9404802 100644 --- a/docs/index.html +++ b/docs/index.html @@ -62,7 +62,7 @@ -

    version ~ 0.2.5

    +

    version ~ 0.2.6

    This component allows you to create a custom select. It offers more flexible @@ -150,15 +150,9 @@

    Example of different selects

    - Same working example -- + View live example https://cg-select.itguild.info/

    -

    - image - image - image - image -

    Built-in themes are also available: dark, white. To apply them, specify the theme attribute in the select settings and pass one of the values ​​into it dark or white. @@ -343,6 +337,10 @@

  • Theme
    • + +
  • + Theme.interface +
  • diff --git a/docs/interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html b/docs/interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html index fe19669..35cf134 100644 --- a/docs/interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html +++ b/docs/interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html @@ -444,6 +444,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/interfaces/components_utils_urils_interface.IDataItem.html b/docs/interfaces/components_utils_urils_interface.IDataItem.html index ff37a83..356e8cd 100644 --- a/docs/interfaces/components_utils_urils_interface.IDataItem.html +++ b/docs/interfaces/components_utils_urils_interface.IDataItem.html @@ -404,6 +404,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/interfaces/components_utils_urils_interface.ISelectedItems.html b/docs/interfaces/components_utils_urils_interface.ISelectedItems.html index 0cc76e0..c4c4fc7 100644 --- a/docs/interfaces/components_utils_urils_interface.ISelectedItems.html +++ b/docs/interfaces/components_utils_urils_interface.ISelectedItems.html @@ -544,6 +544,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html b/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html index 2d817ba..e30eb6c 100644 --- a/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html +++ b/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html @@ -1052,6 +1052,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/interfaces/interfaces_cg_select_interface.IStyle.html b/docs/interfaces/interfaces_cg_select_interface.IStyle.html index a840b3d..7d013fe 100644 --- a/docs/interfaces/interfaces_cg_select_interface.IStyle.html +++ b/docs/interfaces/interfaces_cg_select_interface.IStyle.html @@ -563,6 +563,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/interfaces/interfaces_items_interface.IItems.html b/docs/interfaces/interfaces_items_interface.IItems.html index 170f152..54db31a 100644 --- a/docs/interfaces/interfaces_items_interface.IItems.html +++ b/docs/interfaces/interfaces_items_interface.IItems.html @@ -387,6 +387,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/interfaces/interfaces_language_interface.ILanguage.html b/docs/interfaces/interfaces_language_interface.ILanguage.html index df415a2..0aecc98 100644 --- a/docs/interfaces/interfaces_language_interface.ILanguage.html +++ b/docs/interfaces/interfaces_language_interface.ILanguage.html @@ -385,6 +385,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/interfaces/theme_interface.CustomTheme.html b/docs/interfaces/theme_interface.CustomTheme.html new file mode 100644 index 0000000..77c02d2 --- /dev/null +++ b/docs/interfaces/theme_interface.CustomTheme.html @@ -0,0 +1,493 @@ + + + + + + CustomTheme | cg-select + + + + + + + + +
    +
    + + +
    +
    +
    +
    +
    + +

    Interface CustomTheme

    +
    +
    +

    Hierarchy

    +
      +
    • CustomTheme
      • +
    +
    + +
    +
    +
    + + + +
    +
    +

    Properties

    +
    + + + name + + + styles +
    +
    +
    +
    +
    +
    +
    +

    Properties

    +
    + +

    + name + + + +

    +
    + name: + string +
    + +
    +
    + +

    + styles + + + +

    +
    + styles: + {
        caret?: string;
        chips?: string;
        head?: string;
        lable?: string;
        list?: string;
        placeholder?: string;
        search?: string;
    } +
    +
    +

    Type declaration

    +
      +
    • +
      + Optional caret?: string +
      +
      • +
    • +
      + Optional chips?: string +
      +
      • +
    • +
      + Optional head?: string +
      +
      • +
    • +
      + Optional lable?: string +
      +
      • +
    • +
      + Optional list?: string +
      +
      • +
    • +
      + Optional placeholder?: string +
      +
      • +
    • +
      + Optional search?: string +
      +
      • +
    +
    + +
    +
    +
    +
    +
    +
    + +

    + + + + Settings +

    +     +
    +
    +

    Member Visibility

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

    Theme

    + +
    +
    +
    +
    + + +
    +
    +
    +

    Generated using TypeDoc

    +
    +
    + + + diff --git a/docs/interfaces/theme_interface.CustomThemeJson.html b/docs/interfaces/theme_interface.CustomThemeJson.html new file mode 100644 index 0000000..ad2054f --- /dev/null +++ b/docs/interfaces/theme_interface.CustomThemeJson.html @@ -0,0 +1,481 @@ + + + + + + CustomThemeJson | cg-select + + + + + + + + +
    +
    + + +
    +
    +
    +
    +
    + +

    Interface CustomThemeJson

    +
    +
    +

    Hierarchy

    +
      +
    • CustomThemeJson
      • +
    +
    + +
    +
    +
    + + + +
    +
    +

    Properties

    +
    + + + name + + + styles +
    +
    +
    +
    +
    +
    +
    +

    Properties

    +
    + +

    + name + + + +

    +
    + name: + string +
    + +
    +
    + +

    + styles + + + +

    +
    + styles: + {
        caret?: object;
        head?: object;
        lable?: object;
        list?: object;
        placeholder?: object;
        search?: object;
    } +
    +
    +

    Type declaration

    +
      +
    • +
      + Optional caret?: object +
      +
      • +
    • +
      + Optional head?: object +
      +
      • +
    • +
      + Optional lable?: object +
      +
      • +
    • +
      + Optional list?: object +
      +
      • +
    • +
      + Optional placeholder?: object +
      +
      • +
    • +
      + Optional search?: object +
      +
      • +
    +
    + +
    +
    +
    +
    +
    +
    + +

    + + + + Settings +

    +     +
    +
    +

    Member Visibility

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

    Theme

    + +
    +
    +
    +
    + + +
    +
    +
    +

    Generated using TypeDoc

    +
    +
    + + + diff --git a/docs/modules.html b/docs/modules.html index 10a0f16..c5d93f0 100644 --- a/docs/modules.html +++ b/docs/modules.html @@ -280,6 +280,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/modules/Utils.html b/docs/modules/Utils.html index c44c836..9b35837 100644 --- a/docs/modules/Utils.html +++ b/docs/modules/Utils.html @@ -288,6 +288,10 @@
  • Theme
    • + +
  • + Theme.interface +
  • diff --git a/docs/modules/cg_select.html b/docs/modules/cg_select.html index 48de942..c1e29e7 100644 --- a/docs/modules/cg_select.html +++ b/docs/modules/cg_select.html @@ -218,6 +218,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/modules/components_create_element_create_element.html b/docs/modules/components_create_element_create_element.html index e8db816..f493184 100644 --- a/docs/modules/components_create_element_create_element.html +++ b/docs/modules/components_create_element_create_element.html @@ -245,6 +245,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/modules/components_create_element_create_element_interface.html b/docs/modules/components_create_element_create_element_interface.html index 5b3d58b..397e7d8 100644 --- a/docs/modules/components_create_element_create_element_interface.html +++ b/docs/modules/components_create_element_create_element_interface.html @@ -223,6 +223,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/modules/components_theme_theme.html b/docs/modules/components_theme_theme.html index a520415..52ac610 100644 --- a/docs/modules/components_theme_theme.html +++ b/docs/modules/components_theme_theme.html @@ -219,6 +219,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/modules/components_utils_urils_interface.html b/docs/modules/components_utils_urils_interface.html index 7203431..5430780 100644 --- a/docs/modules/components_utils_urils_interface.html +++ b/docs/modules/components_utils_urils_interface.html @@ -231,6 +231,10 @@
  • Theme
    • + +
  • + Theme.interface +
  • diff --git a/docs/modules/interfaces_cg_select_interface.html b/docs/modules/interfaces_cg_select_interface.html index 6e0214e..510ff9e 100644 --- a/docs/modules/interfaces_cg_select_interface.html +++ b/docs/modules/interfaces_cg_select_interface.html @@ -231,6 +231,10 @@
  • Theme
    • + +
  • + Theme.interface +
  • diff --git a/docs/modules/interfaces_items_interface.html b/docs/modules/interfaces_items_interface.html index 7ba36f8..b9eda6b 100644 --- a/docs/modules/interfaces_items_interface.html +++ b/docs/modules/interfaces_items_interface.html @@ -219,6 +219,10 @@
  • Theme
    • +
  • + Theme.interface +
    • +
  • diff --git a/docs/modules/interfaces_language_interface.html b/docs/modules/interfaces_language_interface.html index b07485b..1471196 100644 --- a/docs/modules/interfaces_language_interface.html +++ b/docs/modules/interfaces_language_interface.html @@ -219,6 +219,10 @@
  • Theme
    • + +
  • + Theme.interface +
  • diff --git a/docs/modules/language_language.html b/docs/modules/language_language.html index 4bf7906..526bcd4 100644 --- a/docs/modules/language_language.html +++ b/docs/modules/language_language.html @@ -226,6 +226,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/modules/theme_interface.html b/docs/modules/theme_interface.html new file mode 100644 index 0000000..bb41e96 --- /dev/null +++ b/docs/modules/theme_interface.html @@ -0,0 +1,276 @@ + + + + + + theme.interface | cg-select + + + + + + + + +
    +
    + + +
    +
    +
    +
    +
    + +

    Module theme.interface

    +
    + +
    +
    +
    +
    +
    +

    Index

    +
    +

    Interfaces

    +
    + + + CustomTheme + + + CustomThemeJson +
    +
    +
    +
    +
    +
    +
    +
    + +

    + + + + Settings +

    +     +
    +
    +

    Member Visibility

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

    Theme

    + +
    +
    +
    +
    + + +
    +
    +
    +

    Generated using TypeDoc

    +
    +
    + + + diff --git a/docs/variables/language_language.en.html b/docs/variables/language_language.en.html index e9bce1c..f986cbe 100644 --- a/docs/variables/language_language.en.html +++ b/docs/variables/language_language.en.html @@ -193,6 +193,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/docs/variables/language_language.ru.html b/docs/variables/language_language.ru.html index 3ff9da4..1b1c897 100644 --- a/docs/variables/language_language.ru.html +++ b/docs/variables/language_language.ru.html @@ -193,6 +193,9 @@
  • Theme
    • +
  • + Theme.interface +
  • diff --git a/package-lock.json b/package-lock.json index b301e96..92aa26f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cg-select", - "version": "0.2.5", + "version": "0.2.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cg-select", - "version": "0.2.5", + "version": "0.2.6", "license": "ISC", "dependencies": { "@parcel/optimizer-css": "^2.8.0", diff --git a/package.json b/package.json index ff44b8f..12e0f8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.2.5", + "version": "0.2.6", "source": "index.js", "main": "dist/index.js", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", diff --git a/src/cg-select.ts b/src/cg-select.ts index 40a94e0..5a1ceff 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -25,7 +25,7 @@ import { ILanguage } from './interfaces/language.interface'; import './main.scss'; import { changeTheme } from './components/theme/theme'; -import { CustomTheme } from 'components/theme/theme.interface'; +import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface'; /** * @class Class Description ICgSelect @@ -37,7 +37,7 @@ export class CGSelect implements ICgSelect { selected?: string; placeholder?: string; items?: IItems[] | string[] | any; - theme?: string | CustomTheme; + theme?: string | CustomTheme | CustomThemeJson; searchMode?: boolean; closeOnSelect?: boolean; nativeSelectMode?: boolean; @@ -357,7 +357,7 @@ export class CGSelect implements ICgSelect { this.carriage = this.element!.querySelector('.caret'); if (this.theme) { - changeTheme(this.element!, this.theme!); + changeTheme(this.element!, this.theme); } if (this.nativeSelectMode === true) { diff --git a/src/components/theme/theme.interface.ts b/src/components/theme/theme.interface.ts index af4420d..ba8395d 100644 --- a/src/components/theme/theme.interface.ts +++ b/src/components/theme/theme.interface.ts @@ -10,3 +10,15 @@ export interface CustomTheme { lable?: string; }; } + +export interface CustomThemeJson { + name: string; + styles: { + head?: object; + list?: object; + placeholder?: object; + caret?: object; + search?: object; + lable?: object; + }; +} diff --git a/src/components/theme/theme.ts b/src/components/theme/theme.ts index 571c70d..af8833e 100644 --- a/src/components/theme/theme.ts +++ b/src/components/theme/theme.ts @@ -1,10 +1,13 @@ -import { CustomTheme } from './theme.interface'; +import { customStylesFormat } from '../utils/utils'; +import { CustomTheme, CustomThemeJson } from './theme.interface'; -export function changeTheme(element: Element, theme: string | CustomTheme) { +export function changeTheme(element: Element, theme: string | CustomTheme | CustomThemeJson) { const select = element!.querySelector('.cg-select'); const caret = element!.querySelector('.caret'); const list = element!.querySelector('ul.list'); const search = element!.querySelector('.inputSearch'); + const placeholder = element!.querySelector('.selected'); + const lable = document.querySelector('.label'); const path = element.querySelectorAll('.pathWhite'); const nativeSelect = element.querySelector('.nativeSelect'); @@ -45,7 +48,23 @@ export function changeTheme(element: Element, theme: string | CustomTheme) { break; } } else { - select!.classList.add(`${theme.styles.head}`); - list!.classList.add(`${theme.styles.list}`); + if (theme.name!) { + let customThemeHead = theme.styles.head! as object; + let customThemeList = theme.styles.list! as object; + let customThemeCaret = theme.styles.caret! as object; + let customThemePl = theme.styles.placeholder! as object; + let customThemeSearch = theme.styles.search! as object; + let customThemeLable = theme.styles.lable! as object; + + customStylesFormat(customThemeHead, select!); + customStylesFormat(customThemeList, list!); + customStylesFormat(customThemeCaret, caret!); + customStylesFormat(customThemePl, placeholder!); + customStylesFormat(customThemeSearch, search!); + customStylesFormat(customThemeLable, lable!); + } else { + select!.classList.add(`${theme.styles.head}`); + list!.classList.add(`${theme.styles.list}`); + } } } diff --git a/src/components/utils/utils.interface.ts b/src/components/utils/utils.interface.ts index d139979..b05a7b9 100644 --- a/src/components/utils/utils.interface.ts +++ b/src/components/utils/utils.interface.ts @@ -1,4 +1,4 @@ -import { CustomTheme } from 'components/theme/theme.interface'; +import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface'; import { IItems } from 'interfaces/items.interface'; /** @@ -56,5 +56,5 @@ export interface ISelectedItems { * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set. * @type {boolean} */ - theme?: string | CustomTheme; + theme?: string | CustomTheme | CustomThemeJson; } diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts index 39a0f07..cb3b24f 100644 --- a/src/interfaces/cg-select.interface.ts +++ b/src/interfaces/cg-select.interface.ts @@ -1,4 +1,4 @@ -import { CustomTheme } from 'components/theme/theme.interface'; +import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface'; import { IItems } from './items.interface'; /** @@ -30,7 +30,7 @@ export interface ICgSelect { * An optional parameter responsible for switching between different themes, the classic theme is set by default. * @type {string} values: dark, white */ - theme?: string | CustomTheme; + theme?: string | CustomTheme | CustomThemeJson; /** * An optional parameter that adds a live search on the select elements. * @type {boolean} diff --git a/tsconfig.json b/tsconfig.json index 85dd01f..417b338 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,74 +1,14 @@ { // "include": ["src/**/*", "index.ts"], "compilerOptions": { - /* Projects */ - // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ - // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ - // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ - // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ - // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ - // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ - /* Language and Environment */ "target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, - // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ - // "jsx": "preserve", /* Specify what JSX code is generated. */ - // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ - // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ - // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ - // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ - // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ - // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ - // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ - // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ - // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ - /* Modules */ "module": "commonjs" /* Specify what module code is generated. */, "rootDir": "./" /* Specify the root folder within your source files. */, // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */, - // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ - // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ - // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ - // "types": [], /* Specify type package names to be included without being referenced in a source file. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ - // "resolveJsonModule": true, /* Enable importing .json files. */ - // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ - - /* JavaScript Support */ - // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ - // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ - // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ - - /* Emit */ - // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ - // "declarationMap": true, /* Create sourcemaps for d.ts files. */ - // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ - // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ - // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ "outDir": "./dist" /* Specify an output folder for all emitted files. */, - // "removeComments": true, /* Disable emitting comments. */ - // "noEmit": true, /* Disable emitting files from a compilation. */ - // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ - // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ - // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ - // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ - // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ - // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ - // "newLine": "crlf", /* Set the newline character for emitting files. */ - // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ - // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ - // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ - // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ - // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ - // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ - - /* Interop Constraints */ - // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */, "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */