Added new mode for created customs theme

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.

README.md

@@ -1,6 +1,6 @@
 # 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.

READMERU.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.2.5
+## version ~ 0.2.6
 
 Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
 Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.

docs/index.html

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

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",

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",
@@ -10,6 +10,7 @@
   },
   "homepage": "https://cg-select.itguild.info",
   "scripts": {
+    "start": "parcel ./test/index.html -p 4500 --open",
     "watch": "parcel watch",
     "build": "parcel build",
     "deploy": "gh-pages -d dist",

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) {

src/components/theme/theme.interface.ts

@@ -14,12 +14,12 @@ export interface CustomTheme {
 export interface CustomThemeJson {
   name: string;
   styles: {
-    head?: {};
+    head?: object;
-    list?: {};
+    list?: object;
-    placeholder?: {};
+    placeholder?: object;
-    caret?: {};
+    caret?: object;
-    search?: {};
+    search?: object;
-    chips?: {};
+    chips?: object;
-    lable?: {};
+    lable?: object;
   };
 }

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 chips = element!.querySelector('.multiselect-tag');
   const path = element.querySelectorAll('.pathWhite');
   const nativeSelect = element.querySelector('.nativeSelect');
 
@@ -44,8 +47,26 @@ export function changeTheme(element: Element, theme: string | CustomTheme) {
         list!.classList.add('classicList');
         break;
     }
+  } else {
+    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 customThemeChips = theme.styles.chips! 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(customThemeChips, select!);
+      customStylesFormat(customThemePl, placeholder!);
+      customStylesFormat(customThemeSearch, search!);
+      // customStylesFormat(customThemeLable, select!);
     } else {
       select!.classList.add(`${theme.styles.head}`);
       list!.classList.add(`${theme.styles.list}`);
     }
   }
+}

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;
 }

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}

test/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Test</title>
+  </head>
+  <body>
+    <!-- TODO: Удалить после окончания обновления -->
+    <button class="cg-dropdown cg-dropdown_selector"></button>
+  </body>
+  <script src="index.js" type="module"></script>
+</html>

test/index.js

@@ -0,0 +1,21 @@
+import { CGSelect } from '../src/cg-select';
+import { newTheme } from './test';
+
+const dropdown = new CGSelect({
+  selector: '.cg-dropdown_selector',
+  placeholder: 'Выберите авто',
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+  ],
+  multiselect: true,
+  multiselectTag: true,
+  theme: newTheme,
+});

test/test.ts

@@ -0,0 +1,12 @@
+import { CustomThemeJson } from 'components/theme/theme.interface';
+
+export const newTheme: CustomThemeJson = {
+  name: 'lol',
+  styles: {
+    head: {
+      color: 'red',
+      fontSize: '18px',
+      background: '#ff000066',
+    },
+  },
+};

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 '<reference>'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. */