From 2d4d77493182ca91f70fe3d1820effebead0f8d5 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 15 Mar 2023 20:09:51 +0300 Subject: [PATCH] Added new mode for created customs theme --- CHANGELOG.md | 4 ++ README.md | 2 +- READMERU.md | 2 +- docs/index.html | 2 +- package-lock.json | 4 +- package.json | 3 +- src/cg-select.ts | 6 +-- src/components/theme/theme.interface.ts | 14 +++--- src/components/theme/theme.ts | 29 ++++++++++-- src/components/utils/utils.interface.ts | 4 +- src/interfaces/cg-select.interface.ts | 4 +- test/index.html | 14 ++++++ test/index.js | 21 +++++++++ test/test.ts | 12 +++++ tsconfig.json | 60 ------------------------- 15 files changed, 97 insertions(+), 84 deletions(-) create mode 100644 test/index.html create mode 100644 test/index.js create mode 100644 test/test.ts 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 @@ -

version ~ 0.2.5

+

version ~ 0.2.6

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