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..bf34122 100644
--- a/README.md
+++ b/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.
diff --git a/READMERU.md b/READMERU.md
index 8478ccb..2c9eef3 100644
--- a/READMERU.md
+++ b/READMERU.md
@@ -1,6 +1,6 @@
# CG-SELECT
-## version ~ 0.2.5
+## version ~ 0.2.6
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
diff --git a/docs/index.html b/docs/index.html
index 949c04a..f02e8f1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -62,7 +62,7 @@
-
This component allows you to create a custom select. It offers more flexible
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..535d77f 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",
@@ -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",
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 3bac395..6e77742 100644
--- a/src/components/theme/theme.interface.ts
+++ b/src/components/theme/theme.interface.ts
@@ -14,12 +14,12 @@ export interface CustomTheme {
export interface CustomThemeJson {
name: string;
styles: {
- head?: {};
- list?: {};
- placeholder?: {};
- caret?: {};
- search?: {};
- chips?: {};
- lable?: {};
+ head?: object;
+ list?: object;
+ placeholder?: object;
+ caret?: object;
+ search?: object;
+ chips?: object;
+ lable?: object;
};
}
diff --git a/src/components/theme/theme.ts b/src/components/theme/theme.ts
index 571c70d..25dc473 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 chips = element!.querySelector('.multiselect-tag');
const path = element.querySelectorAll('.pathWhite');
const nativeSelect = element.querySelector('.nativeSelect');
@@ -45,7 +48,25 @@ 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 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}`);
+ }
}
}
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/test/index.html b/test/index.html
new file mode 100644
index 0000000..db2a3b2
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Test
+
+
+
+
+
+
+
diff --git a/test/index.js b/test/index.js
new file mode 100644
index 0000000..c8ed33d
--- /dev/null
+++ b/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,
+});
diff --git a/test/test.ts b/test/test.ts
new file mode 100644
index 0000000..363c610
--- /dev/null
+++ b/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',
+ },
+ },
+};
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. */