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
Download Patch File Download Diff File Expand all files Collapse all files

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