@yelon/theme
Version:
ng-yunzai theme system library.
131 lines (126 loc) • 11.4 kB
JavaScript
import { Directionality } from '@angular/cdk/bidi';
import { Platform } from '@angular/cdk/platform';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Renderer2, isDevMode, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { I18nPipe } from '@yelon/theme';
import { YunzaiConfigService } from '@yelon/util/config';
import { NzDropDownDirective, NzDropdownMenuComponent, NzDropDownModule } from 'ng-zorro-antd/dropdown';
import * as i1 from 'ng-zorro-antd/icon';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzMenuDirective, NzMenuItemComponent } from 'ng-zorro-antd/menu';
import { NzTooltipDirective, NzTooltipModule } from 'ng-zorro-antd/tooltip';
const YUNZAI_THEME_BTN_KEYS = new InjectionToken('YUNZAI_THEME_BTN_KEYS');
class ThemeBtnComponent {
doc = inject(DOCUMENT);
platform = inject(Platform);
renderer = inject(Renderer2);
configSrv = inject(YunzaiConfigService);
theme = 'default';
isDev = isDevMode();
types = [
{ key: 'default', text: 'theme.default', color: '#2163ff' },
{ key: 'compact', text: 'theme.compact', color: '#2163ff' },
{ key: 'dark', text: 'theme.dark', color: '#020202' },
{ key: 'yuhong', text: 'theme.yuhong', color: '#C04851' },
{ key: 'danjuhuang', text: 'theme.danjuhuang', color: '#FBA414' },
{ key: 'xinghuang', text: 'theme.xinghuang', color: '#F28E16' },
{ key: 'shilv', text: 'theme.shilv', color: '#57C3C2' },
{ key: 'zhulv', text: 'theme.zhulv', color: '#1BA784' },
{ key: 'youlan', text: 'theme.youlan', color: '#1781B5' },
{ key: 'dianqing', text: 'theme.dianqing', color: '#1661AB' },
{ key: 'shangengzi', text: 'theme.shangengzi', color: '#61649F' },
{ key: 'shuiniuhui', text: 'theme.shuiniuhui', color: '#2F2F35' }
];
devTips = `When the dark.css file can't be found, you need to run it once: npm run theme`;
deployUrl = '';
themeChange = new EventEmitter();
dir = inject(Directionality).valueSignal;
key = inject(YUNZAI_THEME_BTN_KEYS, { optional: true }) ?? 'site-theme';
ngOnInit() {
this.initTheme();
}
initTheme() {
if (!this.platform.isBrowser) {
return;
}
this.theme = localStorage.getItem(this.key) || 'default';
this.updateChartTheme();
this.onThemeChange(this.theme);
}
updateChartTheme() {
this.configSrv.set('chart', { theme: this.theme === 'dark' ? 'dark' : '' });
}
onThemeChange(theme) {
if (!this.platform.isBrowser) {
return;
}
this.theme = theme;
this.themeChange.emit(theme);
this.renderer.setAttribute(this.doc.body, 'data-theme', theme);
const dom = this.doc.getElementById(this.key);
if (dom) {
dom.remove();
}
localStorage.removeItem(this.key);
if (theme !== 'default') {
const el = this.doc.createElement('link');
el.type = 'text/css';
el.rel = 'stylesheet';
el.id = this.key;
el.href = `${this.deployUrl}assets/style.${theme}.css`;
localStorage.setItem(this.key, theme);
this.doc.body.append(el);
}
this.updateChartTheme();
}
ngOnDestroy() {
const el = this.doc.getElementById(this.key);
if (el != null) {
this.doc.body.removeChild(el);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ThemeBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ThemeBtnComponent, isStandalone: true, selector: "theme-btn", inputs: { types: "types", devTips: "devTips", deployUrl: "deployUrl" }, outputs: { themeChange: "themeChange" }, host: { properties: { "class.theme-btn": "true", "class.theme-btn-rtl": "dir() === 'rtl'" } }, ngImport: i0, template: "<div\n class=\"ant-avatar ant-avatar-circle ant-avatar-icon yunzai-default__nav-item\"\n nz-dropdown\n nzPlacement=\"bottomRight\"\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"types.length > 0 ? menu : null\"\n>\n <svg\n nz-tooltip\n [nzTooltipTitle]=\"isDev ? devTips : null\"\n class=\"anticon\"\n role=\"img\"\n width=\"21\"\n height=\"21\"\n viewBox=\"0 0 21 21\"\n fill=\"currentColor\"\n >\n <g fill-rule=\"evenodd\">\n <g fill-rule=\"nonzero\">\n <path\n d=\"M7.02 3.635l12.518 12.518a1.863 1.863 0 010 2.635l-1.317 1.318a1.863 1.863 0 01-2.635 0L3.068 7.588A2.795 2.795 0 117.02 3.635zm2.09 14.428a.932.932 0 110 1.864.932.932 0 010-1.864zm-.043-9.747L7.75 9.635l9.154 9.153 1.318-1.317-9.154-9.155zM3.52 12.473c.514 0 .931.417.931.931v.932h.932a.932.932 0 110 1.864h-.932v.931a.932.932 0 01-1.863 0l-.001-.931h-.93a.932.932 0 010-1.864h.93v-.932c0-.514.418-.931.933-.931zm15.374-3.727a1.398 1.398 0 110 2.795 1.398 1.398 0 010-2.795zM4.385 4.953a.932.932 0 000 1.317l2.046 2.047L7.75 7 5.703 4.953a.932.932 0 00-1.318 0zM14.701.36a.932.932 0 01.931.932v.931h.932a.932.932 0 010 1.864h-.933l.001.932a.932.932 0 11-1.863 0l-.001-.932h-.93a.932.932 0 110-1.864h.93v-.931a.932.932 0 01.933-.932z\"\n />\n </g>\n </g>\n </svg>\n <nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu [nzSelectable]=\"true\" class=\"theme-list\">\n @for (i of types; track $index) {\n <li nz-menu-item [attr.data-text]=\"i.text | i18n\" (click)=\"onThemeChange(i.key)\" [style]=\"{ color: i.color }\">\n <nz-icon nzType=\"bg-colors\"></nz-icon> {{ i.text | i18n }}\n </li>\n }\n </ul>\n </nz-dropdown-menu>\n</div>\n", dependencies: [{ kind: "directive", type: NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ThemeBtnComponent, decorators: [{
type: Component,
args: [{ selector: 'theme-btn', host: {
'[class.theme-btn]': `true`,
'[class.theme-btn-rtl]': `dir() === 'rtl'`
}, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
NzDropDownDirective,
NzDropdownMenuComponent,
NzMenuDirective,
NzMenuItemComponent,
NzTooltipDirective,
NzIconModule,
I18nPipe
], template: "<div\n class=\"ant-avatar ant-avatar-circle ant-avatar-icon yunzai-default__nav-item\"\n nz-dropdown\n nzPlacement=\"bottomRight\"\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"types.length > 0 ? menu : null\"\n>\n <svg\n nz-tooltip\n [nzTooltipTitle]=\"isDev ? devTips : null\"\n class=\"anticon\"\n role=\"img\"\n width=\"21\"\n height=\"21\"\n viewBox=\"0 0 21 21\"\n fill=\"currentColor\"\n >\n <g fill-rule=\"evenodd\">\n <g fill-rule=\"nonzero\">\n <path\n d=\"M7.02 3.635l12.518 12.518a1.863 1.863 0 010 2.635l-1.317 1.318a1.863 1.863 0 01-2.635 0L3.068 7.588A2.795 2.795 0 117.02 3.635zm2.09 14.428a.932.932 0 110 1.864.932.932 0 010-1.864zm-.043-9.747L7.75 9.635l9.154 9.153 1.318-1.317-9.154-9.155zM3.52 12.473c.514 0 .931.417.931.931v.932h.932a.932.932 0 110 1.864h-.932v.931a.932.932 0 01-1.863 0l-.001-.931h-.93a.932.932 0 010-1.864h.93v-.932c0-.514.418-.931.933-.931zm15.374-3.727a1.398 1.398 0 110 2.795 1.398 1.398 0 010-2.795zM4.385 4.953a.932.932 0 000 1.317l2.046 2.047L7.75 7 5.703 4.953a.932.932 0 00-1.318 0zM14.701.36a.932.932 0 01.931.932v.931h.932a.932.932 0 010 1.864h-.933l.001.932a.932.932 0 11-1.863 0l-.001-.932h-.93a.932.932 0 110-1.864h.93v-.931a.932.932 0 01.933-.932z\"\n />\n </g>\n </g>\n </svg>\n <nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu [nzSelectable]=\"true\" class=\"theme-list\">\n @for (i of types; track $index) {\n <li nz-menu-item [attr.data-text]=\"i.text | i18n\" (click)=\"onThemeChange(i.key)\" [style]=\"{ color: i.color }\">\n <nz-icon nzType=\"bg-colors\"></nz-icon> {{ i.text | i18n }}\n </li>\n }\n </ul>\n </nz-dropdown-menu>\n</div>\n" }]
}], propDecorators: { types: [{
type: Input
}], devTips: [{
type: Input
}], deployUrl: [{
type: Input
}], themeChange: [{
type: Output
}] } });
const COMPONENTS = [ThemeBtnComponent];
class ThemeBtnModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ThemeBtnModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: ThemeBtnModule, imports: [CommonModule, NzDropDownModule, NzTooltipModule, ThemeBtnComponent], exports: [ThemeBtnComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ThemeBtnModule, imports: [CommonModule, NzDropDownModule, NzTooltipModule, COMPONENTS] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ThemeBtnModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, NzDropDownModule, NzTooltipModule, ...COMPONENTS],
exports: COMPONENTS
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ThemeBtnComponent, ThemeBtnModule, YUNZAI_THEME_BTN_KEYS };
//# sourceMappingURL=theme-btn.mjs.map