apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added new mode for created customs theme

Browse Source
This commit is contained in:
MaxOvs19 2023-03-15 20:09:51 +03:00
parent 2659db4326
commit 2d4d774931
15 changed files with 97 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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.

2
README.md
View File

@ -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.

2
READMERU.md
View File

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

2
docs/index.html
View File

@ -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

4
package-lock.json generated
View File

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

3
package.json
View File

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

6
src/cg-select.ts
View File

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

14
src/components/theme/theme.interface.ts
View File

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

29
src/components/theme/theme.ts
View File

@ -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}`);
}
}
}

4
src/components/utils/utils.interface.ts
View File

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

4
src/interfaces/cg-select.interface.ts
View File

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

14
test/index.html Normal file
View File

@ -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>

21
test/index.js Normal file
View File

@ -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,
});

12
test/test.ts Normal file
View File

@ -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',
},
},
};

60
tsconfig.json
View File

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